个人愚见:Redux 和 Mobx 区别
一. 关于状态管理
它们都有统一维护管理应用状态的能力;
某一状态只有一个可信数据来源(通常命名为store,指状态容器); 操作更新状态方式统一,并且可控(通常以action方式提供更新状态的途径); 支持将store与React组件连接,如react-redux,mobx-react;通常使用状态管理库后,我们将React组件从业务上划分为两类: 容器组件(Container Components):负责处理具体业务和状态数据,将业务或状态处理函数传入展示型组件; 展示型组件(Presentation Components):负责展示视图,视图交互回调内调用传入的处理函数;
二. 关注点的不同
1. Redux更多的是遵循Flux模式的一种实现,是一个JavaScript库,它的关注点在于: Action:一个JavaScript对象,描述动作相关信息,主要包含type属性和payload属性: Reducer:定义应用状态如何响应不同动作(action),如何更新状态; Store:管理action和reducer及其关系的对象,主要提供以下功能: 1>. 维护应用状态并支持读取访问状态(getState()); 2>. 支持监听action的分发,更新状态(dispatch(action)); 3>. 支持订阅store的变更(subscribe(listener)); 4>. 支持通过中间件(redux-thunk、redux-saga、redux-promise等)处理异步任务流程 2. Mobx是一个透明函数响应式编程的状态管理库,它使得状态管理简单可伸缩,它的关注点在于: Action:定义改变状态的动作函数,包括如何变更状态; Store:集中管理模块状态(State)和动作(action); Derivation(衍生):从应用状态中派生而出,且没有任何其他影响的数据,我们称为derivation(衍生),衍生在以下情况下存在: 1>. 用户界面; 2>. 衍生数据, 衍生主要有两种: Computed Values(计算值):计算值总是可以使用纯函数(pure function)从当前可观察状态中获取; Reactions(反应):反应指状态变更时需要自动发生的副作用,这种需要实现其读写操作;
三. 设计思想的不同
Redux 更多的是遵循函数式编程思想 Mobx 设计更多偏向于面向对象编程和响应式编程,通常将状态包装成可观察对象,一旦状态对象变更,就能自动获得更新。
四. 对store管理的不同
Redux将所有共享的数据集中在一个大的store中,统一管理 Mobx是按模块将状态划分出多个独立的store进行管理
五. 数据可变性的不同
Redux强调的是对象的不可变性,不能直接操作状态对象,而是在原来状态对象的基础上返回一个新的状态对象,最后返回应用的上一状态 Mobx中可以直接使用新值更新状态对象
六. 学习成本方面
Redux 较繁琐,流程较多,需要配置,创建store,编写reducer,action,如果涉及异步任务,还需要引入中间件 Mobx 流程相对就简单很多,根据文档上手也比较快