memo-strategy 是一套 React 记忆化决策指南,帮助判断何时使用 React.memo、useMemo 与 useCallback,以及何时不该使用。
用途:在优化 React 组件重渲染时,先确认重渲染是否真的被测量为慢、由什么触发(父组件重渲染、context 变化、state 变化)、props 是否跨渲染稳定,以及昂贵计算是否真的在渲染内。若只是概念问题而非调试具体组件,可跳过排查环节。
主要能力:一是识别常见伪问题——子组件 props 相同仍重渲染多因内联对象/数组/函数 prop;已 memo 的组件仍重渲染多因 context 每次都是新对象;useMemo 结果每次都变多因依赖本身不稳定;useCallback 导致下游重渲染可能因回调依赖频繁变化的状态。二是给出决策规则:React.memo 适用于因父级重渲染而重渲染、重渲染被测量为昂贵、且所有 props 都是原始值或引用稳定值;useMemo 适用于计算可证明昂贵、结果作为 memo 子组件的 prop 需保持引用稳定、或需要为 useEffect 依赖提供稳定对象/数组;useCallback 适用于函数作为 prop 传给 React.memo 子组件、或函数是 useEffect 依赖需要稳定标识。
关键陷阱:React.memo 做浅比较,若任一 prop 是渲染期间创建的对象、数组或函数,memo 形同无效,必须先稳定该 prop。context 会抵消 memo,若 context value 每次是新对象,React.memo 无收益,应拆分 context 或在 provider 层用 useMemo 稳定。useCallback 在子组件未 memo 时总是无用。记得检查依赖数组是否完整,避免过期闭包。
输出形式:可给出带注释的组件(标注每处取舍并指出当前无效的 memo),或决策摘要表/列表。若修复需先稳定 prop 才能生效 React.memo,应先明确说明。输出中应至少包含一条“不要 memo 此处”的建议。