React 函數組件狀態 - 重新渲染太多。 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

丹給出了一個很好的答案，我認為可以對其進行擴展。 我們還可以在 return 塊之外提取 onClick 函數。 如果您需要更復雜的事件邏輯並希望保持返回塊可讀，這將非常有用。

現在我們有一個保存函數表達式的變量increment ，我們可以簡單地將它直接傳遞給我們的onClick偵聽器。

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

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

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