redux超级简单说

先来个图说明下：

Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很好的与React结合，开发组件化程度极高的现代Web应用。（PS:本文笔者是废材，智商比较低 如有不当之处，敬请谅解。)

先说store

Store — 数据存储中心，同时连接着Actions和Views。一般创建是用createStore这个方法。createStore的作用就是：创建一个store来管理app的状态，唯一改变状态的方式就是dispatch一个action，最终返回一个object。

作用：

1、Store需要负责接收Views传来的Action

2、然后，根据Action进行修改。（action智障简单版本）

3、最后Store通知views 进行改变也就是我们常用到setState。

（ps:说到setState 就说下它原理吧）

setState(updater, callback)这个方法是用来告诉react组件数据有更新，有可能需要重新渲染。它是异步的，react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，说到异步大佬们不用担心，里面还有个锁的。还有因为异步的原因，就会出现一个问题，就是你setState后马上拿是拿不到的。

如果有大佬想获取的话，可以简单粗暴的从callback 中获取，也可以利用下react的生命周期，来看一波。如下图

其实在react16后是有改变的，传送门来一波： https://juejin.im/post/5b6f18... 这个写的不错。

看完react生命周期的大佬都知道用componentDidUpdate来获取数据了。

有些小可爱可能会说既然是异步的那么我来一波神仙操作：

这个就是刚才说的setState是有锁的，那个锁其实就是遇到这种神仙操作react 会如下处理的。

也就是我最后会被最后的覆盖的。

说起我们每次修改完Store 接收action 通知后是怎么修改存数据的，这个就由Reducer来处理了。如下图

在一个app里，只能有一个store，如果你想指明不同的state对应不同的action，可以用combineReducers去合并不同的reducer。

Reducer

这玩意的就是一个函数，有两个好处、

1、数据拆解

2、数据不可变（immutability）（ps:如果数据大复杂需要什么撤销各种时也很显Immutable api d的传送门如下： https://juejin.im/entry/5992c...

这些写的一个简单的项目用到过这个东西，还不错。还有一个更轻量的玩意，传送门： https://juejin.im/post/5bf3fa...

react 有一个原则就是单项数据流，不像vue 中的双向数据绑定。说起这个有个传送门给各位大佬的： https://cruyun.github.io/2018...

就是讲到双向ng的双向数据脏检测。

回到主题

因为是单向数据流，一旦数据多的话就会很头疼，祖先组件需要那些，父组件通过props传递一些数据给子组件，其实在渲染时候是构建了两颗树的vd树和组件树。说到vd 就简答说下吧

React的虚拟Dom和其diff算法，是React渲染效率远远高于传统dom操作渲染效率的主要原因。一方面，虚拟Dom的存在，使得在操作Dom时，不再直接操作页面Dom，而是对虚拟Dom进行相关操作运算。再通过运算结果，结合diff算法，得出变更过的部分Dom，进行局部更新。另一方面，当存在十分频繁的操作时，会进行操作的合并。直接在运算出最终状态之后才进行Dom的更新。从而大大提高Dom的渲染效率。

因为那个很复杂有兴趣可以看下diff吗，不过各位大佬都应该看过。

还是惯例传送门走起： https://juejin.im/post/5cb7ee...

其实嘛，想提高效率用shouldComponentUpdate这个函数还是有用的，这个

进行判断是否有必要进行对该组件进行更新（即，是否执行该组件render方法以及进行diff计算）

关于这个也有传送门

https://www.cnblogs.com/pengh...

上面说的好像被移除还是有问题，太久没写react了。。。所以没关注了。

Middleware

Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，换而言之，原本 view -> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ，在这一环节我们可以做一些 “神仙操作的” 的操作。

http://www.ruanyifeng.com/blo...

其实可以看看这个

Provider存在的意义在于：想通过context的方式将唯一的数据源store传递给任意想访问的子孙组件。

connect

Redux中的connect方法，跟Reflux.connect方法有点类似，最主要的目的就是：让Component与Store进行关联，即Store的数据变化可以及时通知Views重新渲染。