javascript - 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)，因此不存在无限循环。