箭头函数在React中绑定事件的核心是避免this丢失和减少函数重建：类组件推荐属性初始化器定义箭头方法，函数组件用useCallback缓存；禁用内联箭头函数以防子组件误更新，大量列表可用事件委托优化。
箭头函数在 React 中绑定事件，核心是避免 this 指向丢失和防止重复创建函数实例。它本身不“绑定”，而是利用词法作用域天然捕获外层 this（即组件实例），同时配合合理写法减少渲染时的函数重建。
直接在 JSX 中写箭头函数？慎用
像这样写看似简洁，但每次 render 都会新建一个函数：
{`
问题在于：触发重渲染时，该内联箭头函数引用变化，可能让子组件（尤其是 React.memo 或 PureComponent）误判为 props 变更而重新渲染。
✅ 建议只在简单场景（如无子组件、或 id 是字符串/数字且不依赖复杂状态）临时使用；❌ 避免在列表项中对每个 item 写内联箭头函数传参。
在类组件中：用属性初始化器定义箭头方法
这是最推荐的类组件写法，函数在实例创建时就定义好，this 稳定，且不会在每次 render 重建：
{`class MyComponent extends React.Component {`}
{` handleClick = (id) => {`}
{` console.log('ID:', id);`}
{` this.setState({ activeId: id });`}
{` };`}
{` render() {`}
{` return ;`}
{` }`}
{`}`}
注意：这里 onClick 里仍用了轻量箭头函数包裹，只为传参；真正执行的 this.handleClick 是稳定引用。
在函数组件中：用 useCallback 缓存带参事件处理器
函数组件没有实例，但可通过 useCallback 配合依赖数组控制函数复用：
{`function MyComponent({ items }) {`}
{` const handleClick = useCallback((id) => {`}
{` console.log('Clicked:', id);`}
{` }, []); // 无依赖则函数永不变化`}
{` return (`}
{`
- `}
- `}
{` `}
{` `}
{` {items.map(item => (`}
{`
{` ))}`}
{`
{` );`}
{`}`}
如果处理器需访问最新 state 或 props，把对应变量加入依赖数组即可，useCallback 会自动更新函数引用。
额外技巧：用 data 属性 + 事件委托简化列表事件
对大量列表项，也可不用每个按钮绑定独立 handler，改用父容器委托：
{`
- {`}
- `}
{` `}
{` `}
{` if (e.target.tagName === 'BUTTON') {`}
{` const id = e.target.dataset.id;`}
{` handleClick(id);`}
{` }`}
{`}}> `}
{` {items.map(item => (`}
{`
{` ))}`}
{`
既减少绑定数量，又避免内联箭头函数泛滥，适合高性能要求场景。
