react-redux总结

1、react.js的高阶组件。

每个组件之间可能会存在很多重复的逻辑，例如从localstorage获取数据，再渲染出来。如果没有使用高阶组件，则获取数据这个逻辑，在对应的组件中都要写出来。因此，高阶组件就是用来解决这个问题的（注意：高阶组件是一个函数而不是类），传入一个组件到高阶组件中，在高阶组件中完成这个逻辑，再将获取的数据通过props返回。

2、react.js的context

React中各组件之间的传值很麻烦，通过props一层一层的传递，即状态提升。Context就是用来解决这个问题的，将公用的值放在context中，然后子组件就可以通过this.context获取共享的内容。但是这样增强了组件之间的耦合，并且每个组件都可以修改context中的值，很不安全。于是引入了redux的概念

3、redux介绍

（1）dispatch概念

由于共享数据存在的风险，因此不能够随便的修改共享数据。Dispatch函数就起到了这样的监管作用，它传入参数action，action参数中一定会有个属性type，来声明你到底想干嘛，在dispatch中会对这个type进行switch，对满足条件的type进行相应的操作，通过appstate来操作。

（2）store的概念

Dispatch这个方式很好用，于是可以独立出来以便复用，即store。Store传入两个参

state和stateChanger(函数)，专门用来生产state和dispatch的集合。

（3）Subscribe

为了避免每次修改数据之后都需要手动渲染，于是加入了订阅者模式，用于监听数据的改变，subscribe（）方法传入一个监听函数，每次调用dispatch时就会监听，我们只需要subscribe一次，后面不管如何dispatch都会自动完成渲染。

（4）优化共享结构的性能

以上的处理方式存在很多性能的缺陷，例如每次重新渲染都是渲染整个页面，而有很多组件并没有发生改变，因此也不需要重新渲染，这样就多余的渲染了。

解决方式用oldstate对改变前的state进行保存，newstate对改变后的state进行保存，在渲染前进行判断。由于这些引用指向的都是同一个state，因此这样的操作是不起作用的，所以禁止在直接修改原来的state，而是复制一个新的对象，在这个对象里面覆盖需要修改的成员，由于是浅复制，因此其他没被覆盖的对象指向的还是原来的对象。

（5）Reducer

将appstate的初始化也放入stateChanger中，并且重命名为reducer（只是个名字而已），createStore中只传一个参数reducer就可以了，reducer是一个纯函数。

4、context和redux结合

（1）context中的数据可以被任意的修改，而store中的是不可以的，因此可以将context 与store结合。在index.js中创建上面所讲的createStore函数和reducer函数，然后创建 store，将store放入Index组件的context中，这样Index的子组件就可以通过context 获取store了

（2）每个子组件都需要去获取store，这样就有大量的重复逻辑，因此可以使用高阶组 件，将获取store的操作放在connect这个高阶组件中。

（3）但是每个组件要从store中获取的数据都是不同的，因此我们需要给这个高阶组 件传入mapStateToProps方法，告诉connect需要获取哪些数据。

（4）同样，需要告诉connect如何获取dispatch，何时触发。因此再给connect传入一 个mapDispatchToProps方法。

（5）此时，Index组件中还有和context相关的代码，我们需要将这些代码从组件中清 除出去，于是重新定义了组件Provider，这是专门用来存储store的组件，包裹了所有 的组件，以便子组件connect的时候可以获取到store。