应控制闭包创建时机与复用粒度：抽离为稳定具名函数、用useCallback缓存（依赖精准）、事件委托替代循环绑定、及时清理异步引用。
直接在高频点击场景中写 () => {...} 匿名函数，本质是在每次渲染或事件绑定时创建新闭包实例——它会捕获外部变量、占用堆内存、且生命周期难以控制。大量重复创建，就会塞满新生代，触发频繁 Minor GC，造成卡顿抖动。核心思路不是“禁用闭包”，而是“控制闭包的创建时机与复用粒度”。
抽离为稳定函数，切断每次渲染的闭包生成
把点击逻辑从模板内移出，定义成独立函数（非箭头函数），避免渲染时反复构造闭包：
- 不要在
ForEach或循环渲染中写.onClick(() => handle(item)) - 改用具名函数 + 显式传参：
.onClick(() => handleClick(item.id))，其中handleClick是组件外或组件级定义的普通函数 - 若需访问组件状态（如
router、state），确保该函数在组件作用域内定义（非每次渲染新建），或通过useCallback绑定固定依赖
用 useCallback 缓存闭包，按需更新而非每次都新建
当点击逻辑必须访问当前组件状态时，useCallback 是更安全的选择——它返回的是同一个函数引用，只要依赖数组不变，就不会生成新闭包：
- 写法示例：
const handleClick = useCallback((id) => { router.push(`/detail?id=${id}`); }, [router]) - 关键点：依赖数组必须精准（只列真正影响逻辑的值），避免误加
items等易变大数组，否则缓存失效 - 注意：不要在
useCallback内部再嵌套匿名函数（如() => doX()），那又回到原问题
对纯数据驱动的点击，改用事件委托 + dataset 分发
如果只是根据 item ID 做跳转或上报，无需每个项绑定独立函数，可统一监听父容器，靠 DOM 层级和 dataset 提取信息：
- 给每个
ListItem加data-id={item.id} - 父容器绑定一次
onClick，在 handler 中用event.target.dataset.id获取目标 ID - 这样整个列表只产生一个闭包，彻底规避 N 次创建问题，也利于滚动时复用
清理不再需要的闭包引用，尤其配合异步操作
闭包常因持有 Promise、定时器或未注销的监听器而延长生命周期，间接拖慢 GC：
- 点击后发起请求，若页面已切换，记得取消请求或忽略回调结果，避免闭包连带持有旧组件上下文
- 不用
setTimeout延迟执行业务逻辑；如必须，确保 timeout ID 可清除，且回调不隐式捕获大对象 - 避免在闭包里直接引用
this、大型数组或缓存对象；优先传入必要字段（如id、type）
