时间戳

首页 > 解决方案 > 使用添加计数按钮重新渲染太多

reactjs - 使用添加计数按钮重新渲染太多

问题描述

我是 React 的新手。我有一个简单的页面，其中的按钮将计数增加 1 或减少 1。解决方案显示了正确的方法，即使用减号按钮的内联函数。但是，当我将加号按钮更改为使用常规功能时，我获得太多重新渲染。

import React, { useState } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
  const [count, setCount] = useState(0)

  const add = (n) =>{
    setCount(n+1);
  };

  return (
    <div>
      {count}
      <button onClick={() => add(count)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

标签： reactjs

解决方案

你不能通过add()，因为它会执行函数并触发无限循环。只是传递add方法的引用，所以它只会在点击事件上执行

import React, { useState} from 'react'

const App = () => {
  const [count, setCount] = useState(0);

  const add = (n) =>{ 
    setCount(count+1);
  }

return (
    <div>
      {count}
      <button  onClick={add}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

export default App;

推荐阅读