React中onClick三种传参方式的区别及重渲染问题咨询

三种onClick传参方式的区别 #

• onClick={doThisFunc}
  传递的是函数的引用，只有当按钮被点击时，React才会调用这个函数，并自动把点击事件对象作为参数传入。这种方式适合不需要自定义传参的场景。

• onClick={doThisFunc()}
  这是在组件渲染阶段立即执行函数，而非绑定点击事件。组件每次渲染都会调用doThisFunc()，如果函数内部有修改state的操作，会直接触发组件重渲染，进而引发循环。

• onClick={() => doThisFunc()}
  传递的是一个匿名箭头函数作为事件处理程序。只有当按钮被点击时，箭头函数才会执行，进而调用doThisFunc()。这种方式支持给doThisFunc传递自定义参数，比如() => doThisFunc(a)，完全由点击行为触发函数执行。

关于无限渲染错误的原因 #

你使用onClick={doThisFunc(a)}时，组件渲染过程中会立刻执行doThisFunc(a)。如果这个函数内部包含更新组件state的逻辑，就会触发组件重新渲染；而重新渲染时又会再次执行doThisFunc(a)，如此往复形成无限循环，React为了保护应用抛出了“Too many re-renders. React limits the number of renders to prevent an infinite loop”错误。

改成onClick={() => doThisFunc(a)}后，只有在按钮被点击时才会执行doThisFunc(a)，不会在组件渲染阶段触发函数调用，自然终止了循环，问题得以解决。

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