什么是状态管理？ 状态 状态是表示组件当前状况的 JS 对象。在 React 中，可以使用 useState 或者 this.state 维护组件内部状态，通过 props 传递给子组件使用。 为了避免状态传递过程中出现混乱，React 引入了“单向数据流”的理念。主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时他们会使用接收到的新值，而不是修改已有的值。当组件的更新机制触发后，他们只是使用新值进行重新渲染。 父子组件通信可以直接使用 props 和回调方式；深层次、远距离组件则要通过“状态提升”和 props 层层传递。 常见模式 React 状态管理的常见模式有： 状态提升：兄弟组件间是没法直接共享状态的，可以通过将状态提升到最近的祖先组件中，所有兄弟组件就可以通过 props 一级级传递获取状态； 状态组合：某些状态可能只在应用程序的特定子树中需要。最好将状态存储在尽可能接近实际需要的位置，这有助于优化渲染行为； 属性下钻：将父组件的状态以属性的形式一级级显示传递给嵌套子组件； Provider：React Context 通过 Provider 包裹组件，被包裹的所有嵌套子组件都可以不用通过属性下钻而是通过 context 直接获取状态。 层层传递的 value onChange 会对一个优质代码库带来的毁灭性影响，粗暴地把数据塞在 redux 中也并不能让一个应用得到很好的拓展性和可维护性。 要解决的问题 状态管理库要解决的问题： 从组件树的「任何地方」读取存储的状态 写入存储状态的能力 提供「优化渲染」的机制 提供「优化内存使用」的机制 与「并发模式的兼容性」 数据的「持久化」「上下文丢失」问题「props失效」问题「孤儿」问题 心智模型 状态更新有两种心智模型： 不可变状态模型 可变状态模型 主要好处是可以使用原生 JS 方法； 基于 Proxy 的状态管理的一个缺点是状态不可预测，难以 debug。 因为 React 没有官方的状态管理方案，React 生态中状态管理库，百花齐放，演进出很多设计思想和心智模式。如何选择状态管理库就变得十分令人抓狂。 React Context 在多级嵌套组件场景下，使用“属性下钻”方式进行组件通信是一件成本极高的事情。为了解决这个问题，React 官方提供 Context 用于避免一级级属性传递。
