react——mobx和redux的区别

（一）mobx

是什么？

mobx是通过函数响应式编程，使状态管理变得简单和可扩展的 状态管理库。

mobx编程的4个概念：

State：状态：相当于有数据的表格
Derivations：驱动
computed value：计算值
reactions：反应

mbox编程的3个重点：

observer观测器：带有观测器的react组件或者属性被mobx实时观测
observable可观测对象：由mobx建立的可观测对象
action更新事件：标识观测对象的改变事件

Actions：我们可以通过定义一些action来修改状态（可观察的属性）的值；而且这也是唯一可以修改状态值的方法；

（二）redux

相当于vue中的vuex

1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)
2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用
3.作用: 集中式管理 react 应用中多个组件共享的状态

流程原理

Redux——详解_Mr.指尖舞者的博客-CSDN博客_redux

（三）共同点

1）两者都是为了解决状态不好管理，无法有效同步的问题而产生的工具。

2）都是用来统一管理应用状态的工具

3）某一个状态只有一个可靠的数据来源

4）操作更新的方式是统一的，并且是可控的

5）都支持store与react组件，如react-redux,mobx-react;

（四）区别

1）Redux每一次的dispatch都会从根reducer到子reducer嵌套递归的执行，所以效率相对较低；而Mobx的内部使用的是依赖收集，所以不会有这个问题，执行的代码较少，性能相对更高；

2）Redux核心是不可变对象，在Reducer中的操作都要比较小心，注意不能修改到state的属性，返回时必须是一个全新的对象；而Mobx采用不存在这个问题，操作比较随意；

3）Redux中写法固定，模板代码较多，Mobx中写法比较随意，但是因为写法随意的原因，如果没有规范性的话，维护性则不会像Redux那么高；

4）正因为Redux中的reducer更新时，每次return的都是不可变对象，所以时间旅行操作相对容易，而Mobx在这方面不占优势

5）Redux更加的轻量，但是一般来说都会配合中间件进行使用

(5条消息) Web前端：Redux 和 Mobx比较，哪个更好?_粤嵌教育的博客-CSDN博客_mobx和redux(5条消息) redux和mobx对比_WeRaceAsOne的博客-CSDN博客_redux和mobx