个人愚见: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 流程相对就简单很多,根据文档上手也比较快

相关推荐