<p>应避免在 React 生命周期或 Hook 中误写匿名表达式，核心是减少每次渲染时重复创建函数对象，防止额外内存分配和垃圾回收压力；需提前定义命名函数并用 useCallback 缓存，或通过 data- 属性绑定参数，确保依赖稳定。</p>
避免在 React 生命周期或 Hook 中误写匿名表达式，核心是减少每次渲染时重复创建函数对象。这类匿名函数（如 () => doSomething()）会触发额外内存分配，增加垃圾回收压力，尤其在列表、高频交互或复杂组件中影响明显。
把事件处理逻辑提前定义为命名函数
不要在 JSX 属性里现场写箭头函数，而是提前声明可复用的函数。
- ❌ 错误写法（每次渲染都新建函数）：
<button onClick={() => handleClick(id)}>Delete</button> - ✅ 正确写法（函数只创建一次）：
const handleClick = useCallback((id) => { /* 逻辑 */ }, []);
然后在 JSX 中直接传引用：<button onClick={() => handleClick(id)}>Delete</button>—— 注意这里仍是内联调用，但handleClick本身是 memoized 的 - 更稳妥的做法是把参数通过
data-属性或闭包提前绑定：const handleClick = useCallback((e) => { const id = e.currentTarget.dataset.id; /* 处理 */ }, []);<button data-id={id} onClick={handleClick}>Delete</button>
在 useEffect 或其他 Hook 中慎用内联函数作为依赖
useEffect 的依赖数组里如果放了匿名函数，会导致依赖“每次都变”，从而反复触发副作用。
- ❌ 错误示例：
useEffect(() => { fetchData(); }, [() => console.log('log')]); // 每次都是新函数，effect 不停执行 - ✅ 正确做法：依赖项应是稳定值（props、state、useCallback 包装过的函数）
const logAction = useCallback(() => console.log('log'), []);<br>useEffect(() => { fetchData(); }, [logAction]); - 如果只是想“执行一次”，空数组就够了，无需把无关函数塞进去
列表渲染中避免 map 内写匿名回调
map 循环里返回 JSX 时，别在事件属性里写新函数，否则每个子项都生成独立函数实例。
- ❌ 危险写法：
{items.map((item, i) => (<br> <li key={i}><br> <button onClick={() => deleteItem(i)}>X</button><br> {item.name}<br> </li><br>))} - ✅ 推荐方案：
• 提前定义deleteItem并用useCallback缓存
• 或改用索引绑定方式（如onClick={() => deleteItem(item.id)}），前提是deleteItem已 memoized - 若逻辑简单且不依赖外部变量，也可提取为独立命名函数：
function handleDelete(id) { /* ... */ }，再传入onClick={handleDelete.bind(null, item.id)}（注意 bind 也会新建函数，不如 useCallback 稳定）
类组件中同样要规避 render 里 new Function
虽然类组件用得少了，但仍有遗留项目。componentDidMount 中注册事件没问题，但 render 函数里写 onClick={this.handleClick.bind(this, id)} 同样每次创建新函数。
- ✅ 更优解：在 constructor 中绑定，或使用 class property 语法定义箭头函数（本质也是在实例上缓存）
handleClick = (id) => { /* ... */ }; - 避免在 render 中做任何函数创建操作，包括
Object.keys(obj).map(...)这类隐式函数生成
