选择合适的状态位置
应用决策框架：本地状态、提升后的状态或全局状态。
第 4 / 4 课13 个步骤
选择合适的状态位置 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
在本课中，您将学习一个实用的决策框架，用于判断状态应放在单个组件、共同祖先、React 上下文还是全局状态库中。
第 1 步：谁使用这个状态
首先请思考：哪些组件会使用这个状态进行渲染？请列出它们。如果只有一个组件使用它，就将状态保留在该组件中。
局部状态
恰好由一个组件使用的状态应与 useState 一起存放在该组件中。例如：下拉菜单是否打开、受控输入框的当前值、提示框是否可见。
function Toggle() {
const [on, setOn] = useState(false);
return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}第 2 步：找到共同祖先
如果多个组件需要该状态，请在组件树中找到它们最近的共同祖先。将状态移到那里，再通过属性向下传递。
提升的状态（2～3 层）
由处于相同嵌套层级的 2～3 个组件共享的状态，很适合进行提升。共同的父组件拥有该状态，并通过属性将它逐层传递下来。
第 3 步：属性逐层传递是否过深
如果共同祖先位于使用方上方 4 层或更多层，通过中间组件传递属性就会产生多余的干扰。请考虑使用上下文。
上下文状态
对于许多组件都需要的横切关注点，请使用上下文，例如当前已认证用户、当前主题、选定的区域设置。这些数据很少变化，但使用方很多。
第 4 步：状态是否复杂或需要跨页面共享
如果状态具有复杂的更新逻辑、需要撤销/重做、必须在导航过程中持续存在，或需要在完全分离的组件树中访问，请使用专用状态库（Zustand、Redux）。
服务器状态有所不同
从服务器获取的数据属于*服务器状态*，而不是界面状态。请不要将它存储在 useState 或全局存储中，而应使用 React Query、SWR 或 RTK Query；它们会自动处理缓存、重新获取和错误状态。
决策流程图
1 个使用方 → 局部 useState。处于相近深度的 2～3 个使用方 → 提升到父组件。逐层传递 4 层或更多层 → 上下文。逻辑复杂或跨组件树 → Zustand/Redux。服务器数据 → React Query/SWR。
快速检查
对于大型应用中许多组件都需要访问的当前已认证用户，最适合将状态放在哪里？
回顾
根据使用方选择状态存放位置：一个使用方使用局部状态，附近的少数使用方使用提升的状态，跨多个层级的许多使用方使用上下文，复杂或跨组件树的状态使用状态库，服务器数据使用 React Query。
课程完成
恭喜您！您已完成**提升状态与属性逐层传递方案**。现在，您已经拥有一个清晰的框架，可以判断状态应存放在哪里，以及如何正确共享状态。
免费开始
用 AI 导师学习 React — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 88
- 课程
- 324
常见问题解答
「选择合适的状态位置」课时是免费的吗？
是的 — 「选择合适的状态位置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「选择合适的状态位置」这节课中我会学到什么？
应用决策框架：本地状态、提升后的状态或全局状态。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「选择合适的状态位置」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。