React 的响应速度始于组件树的结构优化。

重新渲染并非问题所在，真正的问题在于广泛的状态传播。应在进行微记忆化处理之前先将数据源下放到叶子节点。

1699 词

React会按照树形结构的设计要求来运行。当应用显得缓慢时，通常是因为框架正在遵循较长的状态/更新传播路径——而非出现了莫名其妙的故障。

重新渲染并非敌人

渲染是保持UI一致性的方式。真正的敌人是在每次按键时都在大型子树结构中进行不必要的处理。

// ❌ count lives in Parent — expensive siblings re-render on every click
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveComponent />
      <AnotherExpensiveComponent />
    </div>
  );
}

// ✅ count lives in Counter — expensive siblings are untouched
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

function Parent() {
  return (
    <div>
      <Counter />
      <ExpensiveComponent />
      <AnotherExpensiveComponent />
    </div>
  );
}

// ❌ SearchLayout owns state — ExpensiveList re-renders on every keystroke
function SearchLayout() {
  const [query, setQuery] = useState('');

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ExpensiveList />
    </div>
  );
}

/* ✅ StatefulInput receives expensive content as children
 — its reference stays stable */
function StatefulInput({ children }) {
  const [query, setQuery] = useState('');
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {children}
    </div>
  );
}

function SearchLayout() {
  return (
    <StatefulInput>
      <ExpensiveList />
    </StatefulInput>
  );
}

传播应在何处停止

将数据源置于合适位置

应将状态放在负责读写它的组件附近。表单的草稿文本无需存储在应用根目录中。

阻断传播路径

那些接收稳定属性的子组件可以避免参与不必要的处理。组合式架构以及将子组件作为插槽使用的方式，往往比全局缓存更有效。

树形结构作为设计决策

架构设计是一种选择：功能文件夹、容器与视图层的分离，以及本地提供者能够限制更新带来的影响范围。

从数据结构入手

在着手进行微观优化之前，先规划好哪些状态应放在何处，以及在频繁更新时哪些子树需要保持稳定。大多数“React运行缓慢”的问题其实都源于数据结构的问题。

先进行性能分析，再重新组织代码；最后才考虑使用记忆化技术。

上下文提供者也是数据结构的一部分：如果每次渲染都会改变全局上下文，就会使叶子节点的记忆化失效。应根据更新频率来划分不同的上下文。

路由级别的代码分割可以减少首次渲染时所需处理的数据量；结合本地状态使用，能让导航更加轻量。

列表虚拟化就像是数据结构的“手术”——直接移除屏幕外的行，而无需处理成千上万个处于休眠状态的节点。

文档所有权：哪个团队负责管理哪个子树状态。共享的全局存储只是以另一种形式重现了广泛传播的问题。

使用 React Profiler 来记录状态变更前后的提交时间，并将差异保存在 PR 中以便审查。