React中箭头函数应分场景使用：类组件用属性初始化器统一定义方法以复用引用；函数组件传给memo子组件时须用useCallback稳定引用；仅简单操作或临时映射可内联。
在 React 渲染中用好箭头函数，关键不是“少用”或“多用”，而是分清场景：该复用的提前定义，该隔离的就地创建，避免无意识制造新引用。
组件内方法统一用属性初始化器定义
类组件中，把事件处理函数写成类字段（箭头函数形式的属性初始化器），能自动绑定 this，省去 bind 或构造函数里的冗余代码：
handleClick = () => { this.setState({ count: this.state.count + 1 }); }- 在
render中直接传onClick={this.handleClick}，每次渲染都复用同一个函数引用 - 不推荐在
render里写onClick={() => this.handleClick()}—— 这会每次生成新函数
函数组件中优先用 useCallback 封装需传递的回调
当箭头函数作为 prop 传给子组件（尤其是 memo 组件）时，必须稳定引用，否则子组件会误判为 props 变化而重渲染：
- 错误写法：
<List items={items} onItemClick={(id) => setSelected(id)} />→ 每次父组件渲染都新建函数 - 正确写法：
const handleItemClick = useCallback((id) => setSelected(id), [setSelected]);再传onItemClick={handleItemClick} - 依赖数组要写全，避免闭包捕获过期状态
仅用于简单逻辑或临时映射的场景可内联
如果箭头函数只做极简操作、不涉及状态更新、也不传给子组件，内联反而更清晰：
立即学习“Java免费学习笔记（深入）”；
-
{items.map(item => <div key={item.id}>{item.name}</div>)}—— map 回调本身不参与 diff，安全 -
<button onClick={() => alert('提交成功')}>提交</button>—— 无副作用、无 props 透传，影响小 - 但一旦出现
onClick={() => doSomething(state)}或需要传给memo子组件，就该抽出来
避免在条件渲染或循环中重复创建相同逻辑
看似一样的箭头函数，在不同位置重复声明，会导致多个独立函数实例，破坏一致性与可维护性：
- 不要在多个
map项里各自写onClick={() => handleDelete(item.id)} - 统一提取为带参数的稳定函数：
const handleDelete = useCallback((id) => {...}, [...]) - 必要时可配合
useMemo缓存带上下文的处理器，比如useMemo(() => item => handleDelete(item.id), [handleDelete])
