所属分类：综合补充资料 当前为单品课程，可返回上一级继续浏览同方向资料。

← 返回上一级

← 返回所属目录咨询 / 购买

单向数据流 · 状态提升

📚 30 章完整版

📌 状态管理概述

什么是状态 · 状态管理的必要性 · 前端状态管理发展历程

🔁 单向数据流概念

单向数据流定义 · 与双向绑定对比 · 单向数据流优势

⬆️ 状态提升原理

为什么需要状态提升 · 核心思想 · 共享状态设计模式

⚛️ React中的状态提升

React组件树 · 父子通信 · 兄弟组件共享状态

🎛️ Props与回调函数

Props传递数据 · 回调函数传递事件 · 子→父传递数据

🌡️ 实战：温度转换器

摄氏/华氏联动 · 双向同步 · 状态提升案例

🛒 实战：购物车数量同步

商品数量联动 · 共享购物车状态 · 加减同步

📝 实战：表单输入共享与校验

多字段共享 · 实时校验 · 状态提升表单

✅ 实战：多选列表与全选

多选列表 · 全选/取消全选 · 状态提升控制

⚠️ 状态提升的局限性

深层嵌套问题 · Prop Drilling · 属性透传

🧩 Context API入门

React Context作用 · 创建与提供 · 消费Context

⚡ Context API进阶

useContext Hook · 与状态提升对比

📐 Reducer模式

useReducer基础 · Reducer与状态提升结合

🏛️ Redux核心概念

Store · Action · Reducer · 单向数据流体现

🧮 Redux实战

计数器应用 · Todo List应用

💚 Vue单向数据流

Props down, Events up · Vuex State管理

🗃️ Vuex核心

State · Getter · Mutation · Action · Module

🔐 Vuex实战

用户登录状态 · 购物车状态管理

🅰️ Angular单向数据流

Input/Output装饰器 · Service共享状态

🌀 NgRx状态管理

Store · Effect · Reducer · Selector

🧩 组件设计原则

单一职责 · 容器组件与展示组件分离

🔒 不可变数据

为什么不可变重要 · Immer库使用

💾 状态持久化

localStorage/sessionStorage · Redux Persist

⏳ 异步状态管理

Redux Thunk · Redux Saga · React Query

⚡ 性能优化

React.memo · useMemo · useCallback · selector

📱 跨平台状态管理

React Native · Flutter 状态管理

🧪 状态管理测试

单元测试Reducer · 集成测试组件状态

🐞 常见错误与调试

状态不一致 · 过度渲染 · Redux/Vue DevTools

⚖️ 架构模式对比

Flux · Redux · MobX · Recoil · Zustand

🚀 综合项目实战

多用户协作看板 · 状态提升+Context+Reducer