Redux与MobX比较

在学习完 Redux 和 MobX 后,很多读者可能会不知道在项目中应该选择使用哪一个,毕竟这两个库都是非常优秀的状态管理解决方案。我们从以下几个方面对比 Redux 与 MobX。

Store

Redux 是单一数据源,整个应用共享一个 store 对象,而 MobX 可以使用多个 store。因此,MobX 可以将应用逻辑拆分到不同 store 中,而 Redux 需要通过拆分 reducer 来拆分应用逻辑。当应用越来越复杂时,单一 store 可以更方便地在不同组件间共享,而维护多 store 间的数据共享、相互引用关系会变得很复杂。

State

Redux 使用普通 JavaScript 对象存储 state,并且 state 是不可变的,每次状态的变更都必须重新创建一个新的 state。MobX 中的 state 是可观测对象,并且 state 是可以被直接修改的,state 的变化会自动触发使用它的组件重新渲染。此外,Redux 的 state 结构应该尽量扁平化,减少嵌套层级,而 MobX 的 state 结构可以任意嵌套,从这一点上来说,MobX 的 state 更容易直接被组件使用。

编程范式

Redux 是基于函数式的编程思想,MobX 是面向对象的编程思想,因此,对于传统面向对象的开发者而言,MobX 更加友好。Redux 有严格的规范约束,而 MobX 更加灵活,开发者可以更加随意的编写代码。但对于大型项目来说,有严格的规范更易于后期的维护和扩展。

代码量

因为 Redux 有严格的规范,所以往往需要写更多的代码来执行这些规范。例如,实现一个特性需要修改 action、reducer、组件等多个地方,而 MobX 只需要修改用到的 store 和视图组件。

学习曲线

因为 MobX 的面向对象的编程思想以及没有太多规范约束,它的学习曲线更加平缓,更易于上手。对于不熟悉函数式编程的开发者,Redux 是比较难学习的,加上它的诸多规范限制,更增加了初学者的学习难度。

基于以上比较,一般建议当小型团队需要开发相对简单的应用时,可以选择使用 MobX ,它易学习、上手快、代码量少;当团队规模较大或应用复杂度较高时,可以选择使用 Redux,它严格的规范有利于保障项目代码的可维护性和可扩展性。当然,技术的选择是没有绝对的,最终都需要根据实际业务场景做选择。