React 深入解析

` 节点，而不会尝试复用。

Keys 的正确使用

key 必须是稳定、唯一、可预测的标识，通常使用数据 ID。切勿使用数组索引作为 key，因为当列表顺序变化时，索引不会真正反映元素的改变，会导致状态混乱或性能浪费。

React Fiber 架构

为什么需要 Fiber？

React 16 之前的递归 diff 是同步、不可中断的，一旦开始渲染长列表，主线程会被长时间占用，造成页面卡顿。Fiber 的目标就是将渲染工作拆分成小单元，通过可中断的循环让浏览器处理用户交互等高优先级任务。

可中断渲染与优先级控制

Fiber 树中的每个节点就是一个工作单元。React 构建两棵树：current（当前显示的）和 workInProgress（正在构建的）。在 work 循环中，React 会根据剩余时间（通过 requestIdleCallback 或 scheduler 包）决定是否暂停处理下一个 Fiber 节点，从而把控制权交回浏览器。优先级高的任务（如用户输入）可以打断低优先级的更新，之后 Reconciler 再从断点恢复。这就是 Concurrent Mode 的基础。

性能优化实战

避免不必要的重渲染

• 使用 React.memo 包裹函数组件，仅当 props 浅比较变化时才重新渲染。
• 结合 useCallback 和 useMemo 稳定传给子组件的引用，避免因父组件 render 导致子组件误刷新。
• 类组件可使用 PureComponent 或手动实现 shouldComponentUpdate。

代码分割与懒加载

通过 React.lazy() 动态导入组件，配合 Suspense 显示加载指示，减少初始包体积。

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}