为何React中不能直接在onClick事件中调用setState()？

先看触发错误的代码：

const [state, setState] = useState(0)

return(
  <>
    {state}
    <div onClick={setState(1)}></div>
  </>
)

错误提示：重渲染次数过多。React限制渲染次数以防止无限循环。

原因分析 #

• React组件每次渲染时，都会执行return语句里的所有代码逻辑。当你直接写onClick={setState(1)}时，这不是给onClick绑定一个事件处理函数，而是立刻执行了setState(1)。
• 调用setState会触发组件重新渲染，新的渲染过程又会再次执行setState(1)，这样就形成了「渲染→调用setState→重新渲染→再调用setState」的无限循环，直到React触发保护机制抛出错误。

正确写法的逻辑 #

把setState(1)包裹在箭头函数里：

<div onClick={() => setState(1)}></div>

这里赋值给onClick的是一个函数引用，只有当用户点击这个div元素时，箭头函数才会被执行，进而调用setState(1)触发组件更新，不会在组件初始渲染或后续正常渲染时提前执行，也就避免了无限循环。

内容的提问来源于stack exchange，提问作者Sukumar Dey