使用挂钩时无限重发

问题描述

我已经开始阅读Hooks文档并意识到一些事情。 当我直接使用useState（）返回的函数时：

const [count,setCount] = useState(0);
.
.
.
<button onClick={setCount(count + 1)}>+1</button>

反应无限地重新渲染，并给出最大的堆叠到达误差。 为什么会这样？谁能向我详细解释一下？

解决方法

请在您的方法对象调用中添加一个匿名函数。

<button onClick={setCount(count+1)} /> // will run every time.

<button onClick={() => setCount(count+1)} />  // will run once.

,

第一个选项每次都会运行，因为它在渲染上执行，并且总是触发重新渲染，从而创建无限循环。第二个选项是函数声明，仅在触发onClick事件后才执行。