React状态管理

1、状态管理不能用windows对象 为什么？ 因为： （1）会造成全局污染，重复声明 （2）直接取值和复制，数据会变得不清晰 （3）渲染的力度不可控 （4）无法进行像redux这样的时间旅行 2、react hooks给状态管理库的设计带来了什么新思路？ （1）react的类组件、生命周期比较复杂，给状态管理库带来挑战 （2）react的特性都是通过hooks的方案给到开发者，心得状态管理工具通过新特性来简化开发过程。

一、什么是状态管理 react遵循的单向数据流，组件在复杂的层级关系时候会产生“嵌套地狱”。状态管理就是解决跨层级组件之间的数据通信和状态共享。 状态管理：管理共享内存中的状态 react的状态管理工具：flux、redux、mobx等等 实现一个最简单的状态管理工具可能只需要十几行代码。 vue 和angular需要状态管理的场景少，其本身就包含完整的状态管理工具，但是react是一个纯UI层的前端康佳，react将状态的变动完全交给开发者。 二、状态管理工具 react自带：local state（props）和context 单向数据流：flux、redux 双向数据绑定：mobx 1、不同场景下要用不同的状态管理工具。

context（官方）：渲染力度不可控，耦合度较高。存在层层嵌套 flux：比较早期的状态管理工具 local state（props）：需要层层传递，组件销毁的时候也就失效了，这个状态管理工具基本能满足我们的日常需求。 可以在父级元素中定义状态，通过props往下传，如果层级太深props不适用了，用context。 context：实现子页面和子页面之间的通信，只需要在一个地方定义并使用，它下面的子组件都能使用。渲染力度不可控，回生成一些不必要的渲染。只能存单一值。 只要context一变化，其下面的子组件都会重新渲染。但是里面的组件不会频繁的变动。 2、在写程序的时候切记一上来就写一堆状态管理工具。 3、redux架构 由flux演变来的。不可避免的要兼容类组件的写法。 action creation、store、reducers、react component每个架构只做一件事情。 三大原则：但艺术剧院，只有一个store，使用纯函数来执行修改。 时间旅行：可以任意改变状态，会展示到ui渲染层上。需要组件的频繁通信的场景适合使用redux来管理状态。 缺点：需要实现纯函数的reducer，所以需要处理各种各样的副作用。 4、flux的架构如下： store：数据层存放状态，一旦改动就会更新数据以及emit的相关事件 view：视图 action：视图发出的消息 dispatch：派发者，用来接收action，执行回调函数 5、mobx：响应式状态管理和工具，与vue相似。可以做到直接修改后就马上在ui上展现。可以替代redux，小型项目。 6、recoil更加具有原子性 一定程度上解决local state和context的局限性。 7、zustand 轻量级的状态管理工具，适合做移动端页面。 三、实现一个简易的状态管理工具 工具是基于发布/订阅模式来实现的。分为两部分：状态和UI层渲染。 四、redux在项目中的实践 1、redux主要解决组件之间通信的问题 2、redux遵循函数式编程