React中柯里化事件处理器写法是否比常规箭头函数包裹调用写法性能更低？

咱们先把你提到的两种写法拆解清楚，再聊性能的事儿：

首先看你说的柯里化写法：

const handleNavigationClick = (index: number) => () => { setActivePillIndex(index); };
onClick={handleNavigationClick(index)}

每次组件渲染（包括挂载）时，列表里的每个元素都会调用一次handleNavigationClick(index)，这个调用会立即执行外层函数，返回一个绑定了当前index的内层箭头函数，作为onClick的回调。

再看常规写法：

const handleNavigationClick = (index: number) => { setActivePillIndex(index); };
onClick={() => handleNavigationClick(index)}

同样，每次组件渲染时，每个元素都会创建一个全新的箭头函数，这个函数的作用就是在点击时调用handleNavigationClick(index)。

性能对比：几乎没有差异 #

本质上这两种写法在性能上没什么区别——每次渲染都会为列表里的每个元素生成一个新的函数实例。柯里化写法只是多了一次外层函数的调用，但这一点点额外的计算量在浏览器里完全可以忽略，哪怕你有10个、甚至上百个元素，都不会成为性能瓶颈。

要不要优化？ #

如果真的想减少不必要的函数创建（虽然大部分场景完全没必要），可以尝试用useCallback缓存外层函数，但要注意：因为每个元素的index是唯一的，所以不管怎么缓存，每个元素最终还是会得到一个新的回调函数，所以优化效果非常有限。比如柯里化写法的缓存版本：

const handleNavigationClick = useCallback((index: number) => () => {
  setActivePillIndex(index);
}, []); // 依赖项为空，缓存外层函数

但内层函数依然会因为index不同而每次创建新的实例，所以实际收益很小。

总结一下：这两种写法的性能差异可以忽略不计，选哪种主要看代码的可读性和团队的编码习惯就好～

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