React Academy · 课时

向上提升状态：原则与示例

Q: 「向上提升状态：原则与示例」这节课中我会学到什么？

将共享状态移至最近的共同祖先，并通过 props 向下传递。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将共享状态移至最近的共同祖先，并通过 props 向下传递。

向上提升状态：原则与示例 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将学习提升状态模式：将共享状态移动到最近的共同祖先组件，使兄弟组件保持同步。

问题：不同步的兄弟组件

当两个兄弟组件都需要相同的数据时，在各自组件中维护独立状态会导致同步错误。解决方法是将状态移动到它们共同的父组件中。

确定共同祖先

找到同时作为需要共享数据的**两个**组件的父组件中距离最近的那个组件。将状态移动到那里，并通过属性向下传递。

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

提升状态的计数器示例

假设两个组件显示同一个计数器。不要在每个组件中分别管理计数值，而是将它提升到父组件中。两个组件都接收 count 属性，并调用 onChange 回调来更新它。

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

用于更新的回调属性

子组件无法直接修改父组件状态。父组件会将一个回调（例如 `onChange`）作为属性传入。子组件想要请求状态变化时，就调用这个回调。

提升状态后的受控与非受控

提升状态后，之前拥有状态的子组件会变成**受控组件**：它从父组件接收当前值和 onChange。父组件是唯一的事实来源。

多层级提升

有时需要将状态向上提升多个层级。如果状态需要跨越许多中间组件继续提升，请考虑使用上下文，以避免逐层传递属性。

提升状态的好处

提升状态可以让数据只有一个事实来源，使数据流更可预测（始终从上到下），简化调试，并便于日后添加更多使用同一状态的组件。

从提升后的状态派生状态

在父组件中根据提升后的状态计算派生值，并将它们作为额外属性传递。不要复制状态，而应从状态派生。

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

何时不应继续提升状态

如果您发现自己需要跨越 4 个或更多层级提升状态，可能是组件树结构不合理，或者已经到了应该使用上下文或状态管理库的时候。

快速检查

当两个兄弟组件需要共享同一份状态时，正确的做法是什么？

回顾

当兄弟组件需要共享状态时，将状态提升到距离最近的共同祖先。将当前值向下传递，将变更回调向上传递。通过派生值来避免复制状态。

接下来

下一课：**属性逐层传递：何时会造成问题，何时完全没问题**——您将识别有问题的逐层传递链，并判断何时需要解决方案。

常见问题解答

「向上提升状态：原则与示例」课时是免费的吗？

是的 — 「向上提升状态：原则与示例」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「向上提升状态：原则与示例」这节课中我会学到什么？

将共享状态移至最近的共同祖先，并通过 props 向下传递。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「向上提升状态：原则与示例」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy