redux+setState

157 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第30天
一、redux 数据流通的过程
1.用户操作视图
2.发起一次 dispatch。有异步:返回一个函数(使用 thunk 中间件),没有异步:return {}
3.进入 reducer,通过对应的 type 去修改 state,最后返回一个新的 state

二、redux 中间件原理
redux 的中间件就是对 store 的 dispatch 做了个升级,升级之后 dispatch 就可以对象和函数都可以接收,这个时候当调用 dispatch 方法给 dispatch 方法传递的参数是一个对象的话,那么dispatch 就会把这个对象直接传递给 store,跟之前我们写 dispatch 传递给它一个对象没什么区别,但是如果传递给 dispatch 方法是一个函数的话,这个时候 dispatch 已经升级了,它就不会把这个函数直接传递给store,它会先让这个函数执行,执行完了之后需要调用 store 的时候再去调用 store。所以 dispatch 在这里会根据参数的不同执行不同的事情。

三、setState 何时同步何时异步
1.setState 只在合成事件(react 为了解决跨平台,兼容性问题,自己封装了一套事件机制,代理了原生的事件,像在 jsx 中常见的 onClick、onChange 这些都是合成事件)和钩子函数(生命周期)中是“异步”的,在原生事件和 setTimeout 中都是同步的

2.setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形式了所谓的“异步”,当然可以通过第二个参数setState(partialState,callback)中的 callback 拿到更新后的结果

3.setState 的批量更新优化也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和 setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次 setState,setState 的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行合并批量更新