谈谈你对状态管理的理解?
Flux
首先介绍 Flux
,Flux
是一种使用单向数据流的形式来组合 React
组件的应用架构。
Flux
包含了 4 个部分,分别是 Dispatcher
、 Store
、View
、Action
。
工作流程
Store
存储了视图层所有的数据,当 Store
变化后会引起 View
层的更新。如果在视图层触发一个 Action
,就会使当前的页面数据值发生变化。Action
会被 Dispatcher
进行统一的收发处理,传递给 Store
层,Store
层已经注册过相关 Action
的处理逻辑,处理对应的内部状态变化后,触发 View
层更新。
Flux
的优点是单向数据流,解决了 MVC
中数据流向不清的问题 ,使开发者可以快速了解应用行为。从项目结构上简化了视图层设计,明确了分工,数据与业务逻辑也统一存放管理,使在大型架构的项目中更容易管理、维护代码。
Redux
其次是 Redux
,Redux
本身是一个 JavaScript
状态容器,提供可预测化状态的管理。
社区通常认为 Redux 是 Flux 的一个简化设计版本,它提供的状态管理,简化了一些高级特性的实现成本,比如撤销、重做、实时编辑、时间旅行、服务端同构 等。
Redux 的核心设计包含了三大原则:单一数据源、纯函数 Reducer、State 是只读的。
Redux
中整个数据流的方案与 Flux
大同小异
Redux
中的另一大核心点是处理“副作用”,AJAX 请求等异步工作,或不是纯函数产生的第三方的交互都被认为是 “副作用”。这就造成在纯函数设计的 Redux
中,处理副作用变成了一件至关重要的事情。社区通常有两种解决方案:
- 第一类是在
Dispatch
的时候会有一个middleware 中间件层
,拦截分发的Action
并添加额外的复杂行为,还可以添加副作用。第一类方案的流行框架有Redux-thunk
、Redux-Promise
、Redux-Observable
、Redux-Saga
等。 - 第二类是允许
Reducer
层中直接处理副作用,采取该方案的有React Loop
,React Loop
在实现中采用了Elm
中分形的思想,使代码具备更强的组合能力。
- 除此以外,社区还提供了更为工程化的方案,比如
rematch
或dva
,提供了更详细的模块架构能力,提供了拓展插件以支持更多功能。
redux的核心原理是什么?
1.将应用的状态统一放到state中,由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,UI层每一次状态的改变都应通过action去触发,action传入对应的reducer 中,reducer返回一个新的state更新store中存放的state,这样就完成了一次状态的更新
4.subscribe是为store订阅监听函数,这些订阅后的监听函数是在每一次dipatch发起后依次执行
可以添加中间件对提交的dispatch进行重写
redux工作流程:
View
在redux
中会派发action
方法action
通过store
的dispatch
方法会派发给store
store
接收action
,连同之前的state
,一起传递给reducer
reducer
返回新的数据给store
store
去改变自己的state
redux的优点很多:
- 结果可预测;
- 代码结构严格易维护;
- 模块分离清晰且小函数结构容易编写单元测试;
- Action 触发的方式,可以在调试器中使用时间回溯,定位问题更简单快捷;
- 单一数据源使服务端同构变得更为容易;社区方案多,生态也更为繁荣。
Mobx
最后是 Mobx,Mobx 通过监听数据的属性变化,可以直接在数据上更改触发UI 的渲染。在使用上更接近 Vue,比起 Flux 与 Redux 的手动挡的体验,更像开自动挡的汽车。Mobx 的响应式实现原理与 Vue 相同,以 Mobx 5 为分界点,5 以前采用 Object.defineProperty 的方案,5 及以后使用 Proxy 的方案。
Mobx的优点是样板代码少、简单粗暴、用户学习快、响应式自动更新数据让开发者的心智负担更低。
Mobx 在开发项目时简单快速,但应用 Mobx 的场景 ,其实完全可以用 Vue 取代。如果纯用 Vue,体积还会更小巧