React组件两种onClick函数写法的性能对比及相关疑问

组件代码示例 #

组件1 #

const Component = () => { 
  function test() { console.log('test'); } 
  return (<div onClick={test}>Test</div>) 
}

组件2 #

const Component = () => {
  return (<div onClick={() => console.log('test')}>Test</div>)
}

技术疑问解答 #

1. 哪个组件性能更优？原因是什么？ #

在常规业务场景下，两个组件的性能差异可以完全忽略。

从底层细节来看：每次组件渲染时，两个组件都会生成新的函数实例——组件1里的test函数会被重新声明，组件2里的箭头函数也会被重新创建。对于React处理原生DOM元素（这里的<div>）的事件绑定来说，每次函数引用变化时，React会更新DOM上的事件监听，但这个操作的开销极小，不会对页面性能产生可感知的影响。

硬要区分的话，两者在函数创建的过程上没有本质性能差异，都是每次渲染生成新函数。

2. React是否会存储并优化test函数的引用，还是该函数会被销毁，导致二者性能无差异？ #

React不会自动存储或优化test函数的引用。

每次组件重新渲染时，组件1里的test函数都会被重新创建，旧的函数实例会被标记为垃圾回收；组件2里的箭头函数也是同理，每次渲染都生成新的引用。因此默认情况下，两个组件的函数都会经历“销毁-重建”的过程，性能表现没有差异。

如果想要缓存函数引用、避免每次渲染生成新实例，可以使用React的useCallback Hook，将函数包裹后，只有依赖项变化时才会生成新的函数引用。

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