今天学习的是 React 状态管理，以下是课程结构：

• 什么是状态管理
• React 状态管理简介
• 实现一个简单的状态管理工具
• Redux 在项目中的实践

为什么不能用 window 对象

从全局对象 window 说起。

window.color = "Green"
window.theme = "York"

• 1、全局污染，重复声明？
• 2、直接取值和赋值，数据变更不清晰？
• 3、渲染粒度不可控？
• 无法进行时间旅行？

什么是状态管理

从 React 诞生之后，前端组件化的方案深入人心，React 遵循的是单向数据流的原则，属性通过 Props 自上而下的传递，当页面的比较简单，组件之间的层级关系比较浅的时候，这种自上而下的单向数据流的方式是不会有问题的，如果页面一复杂，组件的嵌套层级一深，这种单向数据流的传递方式将会使你陷入到嵌套地狱。

状态管理本身，就是为了解决这种嵌套地狱的问题，解决的事是跨层级组件之间的数据通信和状态共享。

状态管理工具的本质：管理共享内存中的状态

• 共享内存
• 管理状态
• 页面通信
• 组件通信
• 刷新失效

详细定义：单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存中的变量，从而达到状态共享的目的。

状态管理工具简介

Local State

React 当中的 context 解决了 React 当中的，props 或者 state 进行多级数据传递，则数据需要自顶下流经过每一级组件，无法跨级的问题，但是 context 在页面间共享数据的时候同样有很多问题。

• context 相当于全局变量，难以追溯数据的变更情况
• 使用 context 的组件内部耦合度太高，不利于组件的复用和单元测试
• 会产生不必要的更新（比如会穿透 memo 和 dependencies 等）
• context 只能存储单一值，无法存储多个各自拥有消费者的值的集合
• 粒度也不太好控制，不能细粒度的区分组件依赖了哪一个 context
• 多个 context 会存在层层嵌套的问题