个人愚见：Redux 和 Mobx 区别

dcr309duan 发布于2019-08-23 14:21 / 2867人阅读

摘要：一关于状态管理它们都有统一维护管理应用状态的能力某一状态只有一个可信数据来源通常命名为，指状态容器操作更新状态方式统一，并且可控通常以方式提供更新状态的途径支持将与组件连接，如，通常使用状态管理库后，我们将组件从业务上划分为两类容器组件

一. 关于状态管理

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

某一状态只有一个可信数据来源（通常命名为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 流程相对就简单很多，根据文档上手也比较快

GPU云服务器云服务器个人备案和企业备案的区别个人认证和企业认证的区别阿里云服务器个人和企业区别个人小程序和公司小程序的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100472.html

七分设计感的纯Flutter项目(Mung三部曲)

摘要：版版版是一个基于编写，使用豆瓣开源开发的一个项目。提示左右豆瓣把开源关了，现在使用的别的开发者的地址，项目是抽出来的后期可以自己改，现在项目使用的是，可以正常运行。React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter：是一个基于Flutter编写，使用豆瓣开源API开发的一个项目。 showImg(ht...

khlbat 2019-05-22 18:24 评论0 收藏0
React组件设计实践总结05 - 状态管理

摘要：要求通过要求数据变更函数使用装饰或放在函数中，目的就是让状态的变更根据可预测性单向数据流。同一份数据需要响应到多个视图，且被多个视图进行变更需要维护全局状态，并在他们变动时响应到视图数据流变得复杂，组件本身已经无法驾驭。今天是 520，这是本系列最后一篇文章，主要涵盖 React 状态管理的相关方案。前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 评论0 收藏0
React 状态管理库: Mobx

摘要：关心性能的情况下，需要手动设置这时就需要引入状态管理库。现在常用的状态管理库有和，本文会重点介绍，然后会将和进行对比，最后展望下未来的状态管理方面趋势。如果在任何地方都修改可观察数据，将导致页面状态难以管理。 React 是一个专注于视图层的库。React 维护了状态到视图的映射关系，开发者只需关心状态即可，由 React 来操控视图。在小型应用中，单独使用 React 是没什么问题...

liujs 2019-08-20 17:49 评论0 收藏0