React事件处理：箭头函数是否引发重渲染、影响性能？写法对比

先看你提到的两种写法：

写法1：onClick中直接使用箭头函数

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

写法2：使用命名函数绑定onClick

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={increment}>
      点击次数: {count}
    </button>
  );
}

核心疑问解答 #

1. 箭头函数会不会导致组件额外重渲染？ #

不会。组件重渲染的触发条件是自身state变化、props变化，或者父组件重渲染。不管用哪种写法，点击按钮调用setCount都会触发当前组件重渲染——这是状态更新的必然结果，和箭头函数无关。

唯一要注意的场景是：如果把这个事件处理函数作为props传递给子组件，且子组件用React.memo做了浅比较优化。这时候，写法1每次渲染都会创建新的箭头函数实例，子组件会认为props变了，从而触发不必要的重渲染；而写法2里的increment如果不用useCallback包裹，其实每次渲染也会创建新的函数实例，同样会导致子组件重渲染——只有用useCallback缓存函数后，才能避免这种情况。

2. 两种写法的性能差异大吗？ #

在绝大多数日常场景下，性能差异可以忽略不计。创建一个箭头函数的开销极小，现代JS引擎处理这种操作非常快，除非你的组件是每秒渲染几十次的高频场景（比如动画实时更新），否则根本感受不到差别。

3. 命名函数是不是只是个人偏好？ #

不完全是，但在非高频/无子组件传参的场景下，确实更多是偏好问题：

• 命名函数的优点：可读性更强（函数名能表达意图）、方便复用同一个逻辑、方便单独写测试用例；如果配合useCallback，还能在子组件优化时发挥作用。
• 箭头函数的优点：写法更简洁，适合逻辑简单的场景，不用额外定义函数。

结论 #

如果你的组件只是自己用事件处理，没有把函数传给子组件，那两种写法的性能几乎没区别，选你习惯的就行；如果需要把函数传给用React.memo优化的子组件，记得用useCallback缓存命名函数（或者箭头函数），避免子组件不必要重渲染——这时候才是真正的性能优化，而不是单纯换命名函数写法。

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