第三章支线六 ·数据幻域 · 状态管理与数据流

主线回顾

第三章：JavaScript引擎 · 行为之火

支线

支线一 ·原能之核：语法起源
支线二 ·函数幻阶：语法召唤与逻辑封印
支线三 ·异步幻境 · 时间之缝的挑战
支线四 ·事件风暴 · 时序与响应的协奏
支线五 ·组件之城 · 构建与复用的魔法工坊

---

剧情设定

林昊跨越组件之城，进入名为「幻域」的结界。一切构建在数据流动的法则之上，错综复杂的组件结构如迷宫般交错。

在幻域中，他将面见「状态议会」的三位智者：

• ‍♀️ 利亚：传授「状态提升之术」
• ‍♂️ 阿洛斯：讲解「单向数据流与状态共享」
• ‍♂️ 诺德：开启「状态管理系统」的封印术

---

状态提升（Lifting State Up）

林昊在两个组件之间传递数据时陷入困境。利亚指出：

“当两个组件需要共享数据时，把状态提升到它们共同的父组件中去。”

示例：兄弟组件共享输入值

function Parent() {
  const [text, setText] = useState('');

  return (
    <>
      <InputBox value={text} onChange={setText} />
      <PreviewBox content={text} />
    </>
  );
}

function InputBox({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

function PreviewBox({ content }) {
  return <p>预览：{content}</p>;
}

---

单向数据流：界面的稳定之源

阿洛斯展示数据流动的法则：
• 状态向下传（Props）
• 行为向上传（事件回调）

[父组件 state]
     ↓ props
[子组件展示]
     ↑ 事件回调
[子组件操作]

阿洛斯警告：“任何状态双向绑定、混乱引用，都会扰乱幻域的结构，引发‘无限更新循环’的灾厄。”

---

状态共享：传递更深更远的力量

随着组件层级加深，林昊发现 Props 开始变得臃肿。于是，他学习了“上下文魔纹”——React Context。

React Context API（简略）

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <div>当前主题：{theme}</div>;
}

Context 允许跨组件层级共享状态，无需逐层传递 Props。

---

幻域核心：状态管理系统封印术

诺德缓缓打开尘封的「Redux 之卷」和「Zustand 小书」。

“当组件数量庞大，状态交织如迷宫，一套集中管理状态的术法必不可少。”

状态管理的常用方案

工具	特点
React 自带 useContext + useReducer	轻量级共享状态方案
Redux	可预测、严格控制状态流动
Zustand / Jotai / Recoil	现代简洁、高度灵活的状态工具

示例（useReducer）

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

---

实战演练 · 数据流试炼

1. 实现状态提升，让输入框与预览组件共享数据
2. 利用 Context 提供一个“主题模式”给深层组件
3. 使用 useReducer 编写一个计数器组件
4. 思考：何时适合使用 Redux？何时 Context 即可？

---

本章回顾

知识点 内容
状态提升 让多个组件共享统一状态
单向数据流 Props 向下传，事件回调向上传
Context API 跨层级共享状态，避免 Props drilling
状态管理工具 控制大型项目中状态的复杂度

---

林昊收获

称号：幻域编织者（Data Weaver）
解锁技能：
• 管理复杂组件的共享状态
• 理解数据流动路径，减少 Bug
• 为未来大型项目打好架构基础

⸻