javascript - React function 组件状态 - 重新渲染太多。React 限制渲染次数以防止无限循环

Question

我是 React 新手，我正在尝试学习 React 函数组件状态。我想知道为什么我们需要做onClick={() => setCount(count + 1)}而不是onClick={setCount(count + 1)}

import React, {useState} from 'react';

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

export default Counter;

Answer 1

setCount(count + 1)将立即调用setCount(count + 1)每个渲染。这将改变组件的状态，强制一个新的渲染，它会setCount()再次调用......你最终会进入一个无限的渲染循环，其中 React 运行时永远无法完成渲染组件（这是一个简化的解释）。

() => setCount(count + 1)是一个表达式，它定义了一个函数，当被调用时，将调用setCount(count + 1). 它不调用setCount(count + 1)自己，所以没有无限循环。

Answer 2

丹给出了一个很好的答案，我认为可以扩展。我们还可以在返回块之外提取 onClick 函数。如果您需要更复杂的事件逻辑并希望保持返回块可读，这很有用。

现在我们有了一个increment包含函数表达式的变量，我们可以简单地将它直接传递给我们的onClick监听器。

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

  const increment = () => {
    ...
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>+</button>
      {count}
    </div>
  );
}