10 posts tagged with "React"

React ref 和 forwardRef 不是一个层级的概念。

ref 是 React 故意不放入 props 的"逃生通道"，forwardRef 是把这个通道从 class 实例延伸到函数组件的桥梁。

• ref 是 React 特殊处理的 prop：class 组件默认挂到实例，函数组件默认拿不到
• forwardRef 把 ref 这个逃生通道"打通"到函数组件内部的 DOM 或组件实例
• 经典组合：forwardRef + useImperativeHandle，自定义暴露给父组件的方法集合
• displayName 给 DevTools 留个可读名字，避免看到一堆 "ForwardRef" / "Anonymous"
• React 19 起 ref 已经是普通 prop，forwardRef 即将退役——但理解它仍是排查老代码的基础

函数组件 re-render 的根因只有一条：引用变了。state 更新、props 变化、父组件渲染、context 值变化——本质上都是"某个引用不等于上一次的引用"。

• React.memo 决定"要不要渲染"：props 浅比较通过就跳过，不通过就走正常流程
• useCallback / useMemo 保证"引用稳定"：让 memo 的浅比较真正生效，否则每次渲染新引用，memo 形同虚设
• 三者是组合拳：只用 memo 不缓存引用 → 白用；只缓存不用 memo → 也白用
• 拆分组件 +状态下移 往往比加 memo 更治本：把频繁更新的状态隔离在小范围组件内
• 列表用 id 做 key，保证增删排序时最小 DOM 更新；纯分页无排序删除可用 index，反而更高效
• React 19 的 React Compiler 自动处理记忆化，但理解原理仍然是排查性能问题的基础