mobx和redux的对比

2019 / 04 / 07

同样作为状态管理库,二者在所有场合都是可以互相替代的,同时也都能和react或者其他的mvvm框架非常好的配合。二者也都是非常优秀的,都有自己的核心思想,都非常的简单明了。

目标

为了更好的纯粹的对比二者的区别,在demo中不参合react或者其他的框架,然后实现同样的一个功能。

实现的功能如下

监听一个dom,每当state中的width发生变化,dom的宽度自动发生变化。

redux版本

redux的核心是state, action和reducer, 然后通过redux的createStore API来创建store。

store可以通过subscribe来订阅状态改变,每当action被触发的时候就会自动执行订阅的事件。从而实现状态发生改变,dom宽度自动变化。

redux的概念主要有store, dispatch, action, reducer, state和subscribe

import { createStore } from 'redux'
const demo = document.getElementById('demo')

const CHANGE_WIDTH = 'CHANGE_WIDTH'
const changeWidthAction = { type: CHANGE_WIDTH }
const initialState = { width: 100 }
const reducer = (state = initialState, action) => {
switch (action.type) {
case CHANGE_WIDTH:
return { width: state.width + 2 }

default:
return state
}
}
const store = createStore(reducer)
store.subscribe(() => {
const state = store.getState()
demo.style.width = state.width + 'px'
})

setInterval(() => {
store.dispatch(changeWidthAction)
}, 16)

mobx版本

同样的逻辑,mobx的实现要简洁的多,mobx并没有任何reducer,action的过程,有的只有一个被观察的数据,和自动执行任务,当被观察的数据被修改的时候会自动执行autorun的任务。

mobx的主要概念有state, observable和autorun

import { observable, autorun } from 'mobx'
const demo = document.getElementById('demo')

const state = observable({ width: 100 })
autorun(() => {
demo.style.width = state.width + 'px'
})

setInterval(() => {
state.width++
}, 16)

对比

说到对比,作为一个mobx的深度用户,而redux可能处于入门到放弃阶段吧,所以以下的评论很有可能是没有意识到一些其他的问题从而得出的片面的结论。

代码量的对比

代码量的对比是非常客观的,没有什么可挑剔的。

如果去除掉setInterval和引入API的代码,mobx其实只有三行,而再认真看可以发现,mobx只是增加了两个装饰器observable和autorun。其他的代码都是业务逻辑。而redux引入了reducer,action的概念,然后需要较多的额外的代码来维持运行秩序。

原理的对比

从实现原理的角度来看,两者的理念非常相似,都是触发改变和自动执行。redux的原理可以看我的另外一篇博客 redux的实现,这里简单的说一下。

其实也非常的简单,redux的subscribe中有一个事件队列,每当dispatch发生的时候,redux会通过reducer改变state,然后会执行subscribe的队列,这样就可以每次dispatch action都能自动修改dom。

然后说说mobx的原理,如果了解Proxy的话可以非常清楚的知道autorun的实现。mobx在5.x之后的版本都使用了ES6的Proxy,大概是这样的

mobx首先会通过observable声明状态,这个状态和普通的状态一样能任意的获取到值和修改值,唯一的区别是这个值发生变化,可以触发监听的事件队列,就是所谓的setter和getter函数。

然后定义autorun的时候会执行一遍autorun内部的函数,执行的时候就会第一次触发getter,同时也会把这个函数作为一个监听事件放到setter中。每次发生值的变化,都会触发这个事件。

性能的对比

这个小小的demo中并不能体会到二者的差异所在,但是通过原理可以感受到一些差异。

mobx可以精确的定位到值是否变了,哪个值变化了,应该发生什么操作。

redux不行,只能对比新旧store里的state然后得出哪个值变了,然后去执行对应的操作。

mobx是深度观察,redux只是浅对比,这方面来看mobx可能需要多花费一定的性能。

代码组织

mobx可以通过面向对象的方式声明store,但是mobx并不一定是面向对象的,从上边的代码来看,mobx的写法只是观察数据,但并没有用到面向对象的概念,但大家都喜欢用面向对象的方式管理store,所以mobx倾向于面向对象的代码组织方式。而redux是函数式这个是千真万确的,毫无疑问的。

这里牵扯到面向对象还是函数式的问题,react本身是非常偏好于函数式的,但并不是说面向对象low,作为代码组织方式的鼻祖,也是最接近人类思考问题方式的一种组织方式,毫无疑问二者都是非常有用的,而且在我看来,而且两个可以搭配着用。

另外一方面redux事先规定了纯函数的reducer,需要使用不可变数据,而mobx可以任意的去修改被观察的数据,这意味着mobx的数据不能很好的追溯和查看整个变化过程,在复杂的问题上会出现问题

生态

redux要早于mobx出现很久,同时受众人群也非常的多。所以在生态方面的优势远大于mobx。redux可以和很多著名的插件中间件配合使用,从而发挥出更高的效率。

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟