用途:rerender-memo 是一个面向 React 的性能优化技能,核心思路是把昂贵的工作抽离到记忆化组件中,以便在计算之前就能提前返回,避免不必要的重复计算。
主要能力:演示如何用 React.memo 包裹子组件,并结合 useMemo 缓存计算结果。资料给出的对比示例中,错误写法在 Profile 组件内先用 useMemo 计算头像,即使 loading 为真也会执行计算;正确写法把头像逻辑抽到 memo 包裹的 UserAvatar 组件,Profile 在 loading 时直接返回 Skeleton,从而跳过计算。
使用方式:将依赖昂贵计算的 UI 片段拆分为独立组件,用 memo() 包裹,并在组件内部用 useMemo() 缓存派生值;父组件通过提前 return 控制渲染路径。
限制与注意:资料明确指出,如果项目启用了 React Compiler,则无需手动使用 memo() 和 useMemo(),编译器会自动优化重渲染。其余适用场景、版本要求与安装方式暂未提供。