为react项目选择合适的状态管理库

  • April 21, 2017 01:46
  • Posted by jamie
  • 0 comments

经过了几个react-redux的项目后,我整理了一下一些对redux的看法,同时也找到了一个可替代redux的工具(mobx)。

下面我们主要来对比一下redux和mobx这两个库的体验。

redux的实际体验

  1. 流程比较繁琐。如果想存储来自api的数据并使用它,需要经过actionType的声明、建立3种action、在reducer中建立3个case、把state和action绑定到容器上、在容器里把state和action一级一级往下传到目标react组件这么一个流程。结果上来说它所做的就是把api返回的数据合并到一个对象中

    current_obj = response.result
    
  2. redux是一个不好的库吗?

    redux的流程是繁琐,那选择它是一个 bad choice 吗?

    作为一个编程经验尚浅的前端,我连oop都还没有熟练,更何况是函数式这么复杂的模型,所以我也说不出redux是不是真的不好。

    但如果是从业务开发的角度来说,几个react项目下来,我感觉使用redux后开发的流程会有很大开销。试想一下,你在用oop写UI组件,然后到需要加入api数据的时候,你得切到另外一个编程思想不一样的库来开发,然后把上一套写过的redux文件,一个一个去复制,然后去改变量名,最后一个组件一个组件的往下传,这得多耗体力啊。

  3. 架构复杂

    redux流程复杂的同时也导致了项目架构会更复杂。每一步redux流程都得按分类放在不同文件夹下。这也使得就算是一个简单业务的功能的代码也会分散到不同文件下,而这些文件和代码为了体验它们之间时有关系的,文件和方法命名得相似(只是相似,根据功能不一样,同一个单词有时是小写,有时是大写,有时得加前缀、后缀)。随便一个需求就要改动多个文件,一不小心写错字符,得改很多文件。

  4. action和reducer之间中间过多,使得数据结构变得抽象。
    经过redux-thunk, promise-middleware中间件处理后,到达reducer的数据结构跟action调用时是不一致的。

我们真正需要的是什么

我总结了一下redux对项目的作用。

  1. 可创建一个独立于react组件的一个存储对象。
  2. 在任何react组件都可以使用。
  3. react组件被拆除后,组件的state就会消失,但redux不会,所以也是一个缓存对象。

总的来说就是一个独立的对象,那我们可以手动创建一个对象来储存数据吗?

可以。mobx提供了这个功能。

mobx是什么

Mobx是上手非常容易的状态管理工具,只需要两个api,就可以让一个简单对象,变成一个可管理状态的对象。

import { observable, action } from 'mobx-react'
// 下面是一个计数器
const counter = {
    state: observable({
        count: 0
    }),

    add: action(function() {
        this.state.count ++ 
    })
}
export default counter

// 这时候 counter的结构是这样的
{
    state: { count: 0 }
    add: function
}

由observable包装过的都是一个状态(state),它能影响view的渲染。

在action包装过的方法里,我们可以自由的改变state,并响应到view上。

最后得把react和mobx联系起来

import { observer } from 'mobx-react'
import counter from './counter'

const CouterView = () => {
    return (
        <div>
          <span>{ counter.state.count }</span> //这里的count时计数器里的数据
          <button onClick={() => counter.add()} > + </button> // 点击按钮会把数字加1
        </div>
    )
}

export default observer(CouterView)

通过以上例子,我个人感觉是,跟高度抽象的函数式不同,面向对象模型的代码会更直观,能一眼就知道这个对象的功能。

mobx的优势

  1. mobx具有面向对象模型的优势。纵观现在主流的几种web开发语言(java、python、php、ruby)在开发业务时还是以oop为主的,这种模型已经有10多年的历史了,所以稳定性还是可以保证的。

  2. 多组件使用

    使用redux的话需要建立容器组件来绑定state,action。然后一级一级往下传才能供UI组件来使用。如果组件化程度比较高,那么传递的层级也会加深,会出现很多重复的代码。

    但在mobx中state的业务代码是写在单独一个文件里的,借助js的模块化,把对象引入进来就可以使用。层级比较深时不需要一级一级传。

  3. 使用简单

    在mobx中没有reducer这一层,所以不需要为了action和reducer之间的通信而使代码高度抽象。

    mobx里state的更新是很直观的,通过赋值行为即可,而不需要dispatch或者setState这样的方法。

    曾经在redux项目的开发中出现,不怎么接触redux的开发者在写redux时会出现只写了action,状态的改变完全不管的情况。而流程更简单的mobx是不容易出现少做了几步操作的情况的。同时,在维护时也不需要绕来绕去的找 ‘到底这个state声明了什么,做了什么’。

总结

整体来说,我觉得使用mobx能提供项目的开发效率和维护难度。非常适合中小型项目、小团体合作。

Comments

Post your comment