React中直接传递事件处理器与箭头函数包裹的功能及性能差异

先看你给出的代码片段：

export default function App() {
  const handleChange = e => {
    console.log(e.target.value);
  }
  return (
    <div className="App">
      {/* example 1 */}
      <input onChange={handleChange}></input>
      {/* example 2 */}
      <input onChange={e => handleChange(e)}></input>
    </div>
  );
}

功能层面 #

这两种绑定方式功能完全一致，最终都是把输入框的change事件对象传递给handleChange函数，实现打印输入值的效果。第二种写法只是用箭头函数做了一层无意义的“中转”，本质逻辑和直接传递handleChange没有区别。

性能层面 #

两者存在细微但值得关注的性能差异：

• 函数创建开销：示例1中，handleChange会在组件每次渲染时被重新创建为一个新函数；而示例2除了每次创建handleChange外，还会额外生成一个新的箭头函数e => handleChange(e)。这意味着示例2每次渲染会多产生一个函数实例，带来微小的内存开销。
• 调用栈开销：当change事件触发时，示例2会先执行外层的箭头函数，再调用handleChange，比示例1多了一次函数调用的栈操作（这个开销在普通场景下几乎感知不到，但在高频触发事件的场景下会累积）。
• 渲染优化影响：如果这个输入组件是自定义组件且用React.memo做了浅比较优化，那么：
  • 若你用useCallback缓存handleChange的引用（比如const handleChange = useCallback(e => { ... }, [])），示例1的onChange引用会保持稳定，自定义组件不会因onChange变化而触发不必要的重渲染；
  • 但示例2的箭头函数仍然会在每次渲染时生成新引用，哪怕handleChange被缓存，也会导致自定义组件频繁重渲染，直接破坏React.memo的优化效果。

总结：功能无差异，性能上示例1更优，尤其是在需要做渲染优化的场景下。

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