高频触发回调中直接使用箭头函数会显著放大性能风险，因其每次调用都生成新函数实例，导致内存分配激增、子组件误重渲染及潜在内存泄漏；应改用useCallback预定义、data属性传参或ref+外部函数等方式规避。
高频触发回调（比如 scroll、mousemove、input）中直接使用箭头函数，会显著放大性能风险——不是因为箭头函数本身慢，而是它在每次调用时生成新函数实例的特性，与 React 渲染机制或事件监听生命周期叠加后，引发不必要的内存分配和重渲染。
高频回调场景下箭头函数的实际开销
在事件监听器中写成 element.addEventListener('scroll', () => handleScroll())，表面看没问题，但每次绑定（或组件重渲染导致重新绑定）都会创建一个全新函数。浏览器需为其分配内存、建立闭包环境；若该监听器未被手动移除，还可能造成内存泄漏。更隐蔽的问题是：若该箭头函数被传入子组件作为 prop（如 <list onscroll="{()"> loadMore()} /></list>），子组件会因 props 引用变化而强制重渲染，哪怕逻辑完全没变。
React 中高频交互里的典型陷阱
- 列表滚动加载：父组件状态更新 → 重新渲染 → 每个子项都收到新的
onClick={() => onItemClick(id)}→ 所有子组件触发重渲染 - 表单实时校验：
<input onchange="{(e)"> validate(e.target.value)} />在每次输入时都新建函数，阻碍React.memo缓存生效 - 动画帧回调：
requestAnimationFrame(() => updatePosition())若写在 render 内部，每帧都生成新函数，增加垃圾回收压力
更稳妥的替代方案
- 事件监听器统一用
useCallback提前定义，并依赖数组稳定：const handleScroll = useCallback(() => { /* ... */ }, [deps]) - 需要携带参数时，改用数据属性或闭包预置：
<button onclick="{handleClick}" data-id="{item.id}"></button>，再在 handler 里读取e.currentTarget.dataset.id - 对原生 DOM 事件，优先用
ref+ 外部定义函数，避免在 JSX 中内联创建 - 高频节流/防抖应封装在函数定义层，而不是每次回调里临时包裹：
const debouncedSearch = useMemo(() => debounce(search, 300), [])
什么时候可以放心用箭头函数？
仅限于：不作为 prop 传递给子组件、不参与依赖数组、不被反复注册/注销的简单一次性回调。例如组件内部的 setTimeout 回调、或 Promise.then(() => setState(...)) —— 这类场景函数只执行一次，且不涉及引用比对，影响极小。
