箭头函数如何避免React组件重复渲染？

• 错误写法onClick={setvalue(value+1)}的问题：这种写法不是给点击事件绑定一个触发时执行的回调，而是在组件每次渲染的过程中就直接调用了setvalue(value+1)。
• 调用setvalue会更新组件的state，state变化会触发React重新渲染组件；重新渲染时又会再次执行setvalue(value+1)，如此反复就形成了无限渲染循环，最终抛出“渲染次数过多”的错误。
• 箭头函数包裹的正确写法onClick={() => setvalue(value+1)}：这里传递给onClick的是一个待触发的箭头函数，只有当用户实际点击按钮时，这个箭头函数才会被执行，进而调用setvalue更新state。这种情况下，state更新只会触发一次组件渲染，不会在渲染阶段主动触发更新，也就不会出现无限循环。

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