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

【问题标题】：React function Component state - Too many re-renders. React limits the number of renders to prevent an infinite loopReact function 组件状态 - 重新渲染太多。 React 限制渲染次数以防止无限循环
【发布时间】：2020-04-14 06:12:15
【问题描述】：

我是 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;

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

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

() => setCount(count + 1) 是一个定义函数的表达式，当调用该函数时，将调用setCount(count + 1)。它本身不调用setCount(count + 1)，所以没有无限循环。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：