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

Question

我刚接触React，正在学习函数组件中的state。请问为什么我们需要这样写：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;

- user3818381

Answer 1

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

() => setCount(count + 1)是一个表达式，它定义了一个函数，当调用该函数时，它会调用setCount(count + 1)。它本身不会调用setCount(count + 1)，因此不存在无限循环。

- Dan

Answer 2

Dan给出了一个不错的答案，我认为可以进一步扩展。我们还可以将onClick函数提取到return块之外。如果您需要更复杂的事件逻辑并希望保持return块的可读性，则这非常有用。

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

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

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

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

- 23k