Redux 和 Mobx 区别

 

为什么会将两者进行对比？

 

一. 关于状态管理

 

Redux 和 Mobx它们都有统一维护管理应用状态的能力；

 某一状态只有一个可信数据来源（通常命名为store，指状态容器）；
 操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）；
 支持将store与React组件连接，如react-redux，mobx-react；通常使用状态管理库后，我们将React组件从业务上划分为两类：
　　1.容器组件（Container Components）：负责处理具体业务和状态数据，将业务或状态处理函数传入展示型组件；
　　2.展示型组件（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强调的是对象的不可变性，不能直接操作状态对象，而是在原来状态对象的基础上返回一个新的状态对象，最后返回应用的上一状态
（不通过action更新一下state,当然不能成功）

Mobx中可以直接使用新值更新状态对象(直接修改状态与react的理论完全相悖啊，最好还是开启严格模式。

六. 学习成本方面

Redux 较繁琐，流程较多，需要配置，创建store，编写reducer，action，如果涉及异步任务，还需要引入中间件
Mobx 流程相对就简单很多，根据文档上手也比较快