专栏首页首席架构师智库「前端架构」Redux vs.MobX的权威指南

「前端架构」Redux vs.MobX的权威指南

大型应用程序的前端管理是最难解决的问题之一。虽然有几种方法可以解决状态管理问题,但Redux和MobX是两个最流行的外部库,用于解决前端应用程序中的状态管理问题。在这篇文章中,我们将研究每个库以及它们是如何匹配的。

本文假设您对web应用程序中的状态管理工作有一个基本的了解。普通JavaScript和Redux框架都适用于普通或不可知的框架。

Redux

Redux是一个流行的状态管理解决方案,它结合了Flux和函数式编程概念。Redux的一些核心原则是:

  • Redux只有一个存储——单一来源的真相
  • 存储区中的状态是不可变的
  • 操作会调用对存储的更改
  • Reducers(减速器)更新状态

MobX

MobX是一个状态管理解决方案,可以帮助管理应用程序中的本地状态。

MobX的一些核心原则是:

  • MobX可以有多个存储来存储应用程序的状态
  • 任何可以从状态派生而不需要任何进一步交互的东西都是派生
  • Action是任何可以改变状态的代码
  • 当状态发生变化时,所有的派生都会自动和自动地更新

现在让我们比较Redux和MobX的一些关键特性,看看哪些特性更适合您的需求。

人气

在开始学习Redux或MobX之前,让我们看看哪个更受欢迎。

看看下面的谷歌趋势图。截至2019年4月,相比MobX,Redux在谷歌上似乎是一个更受欢迎和搜索的概念。

为了深入了解他们的受欢迎因素,让我们看看2018年JavaScript现状调查。它发布了过去三年里Redux和MobX在开发者中的受欢迎程度的数据。

Redux

Mobx

在过去的几年里,Redux已经获得了大量的人气,并且已经成为状态管理的最佳解决方案。虽然MobX不像Redux那么受欢迎,但它也有自己的优势。

获奖者:Redux

学习曲线

Redux

开发人员对Redux的普遍看法是它不容易学习。2018年JavaScript现状调查分析了Redux最不受欢迎的方面。在这里,开发人员投票认为他们不喜欢Redux的复杂性和它带来的艰苦的学习曲线。

它需要一些时间来理解它的模式和范例。它是通量体系结构和函数式编程概念的结合。如果您是一个函数式程序员,您可能会发现掌握Redux更容易,而如果您来自面向对象编程背景,Redux代码最初看起来很复杂而且很难理解。

学习Redux还意味着您需要了解像Thunk和Saga这样的Redux中间件,这会增加更多的学习内容。

Mobx

众所周知,与Redux相比,MobX更容易掌握。大多数JavaScript开发人员都精通面向对象编程,这使得学习MobX变得简单。另外,MobX中有很多事情是在幕后完成的,为开发人员创造了更好的学习体验。您不必担心状态的规范化或实现类似Thunks的概念。由于已经内置了抽象,因此编写的代码更少。

获奖者:MobX

存储数据-单个存储与多个存储

存储区是我们存储本地数据的地方。它保存整个应用程序的状态。JSON应用程序的状态存储中通常包含一个巨大的对象。

Redux

在Redux,只有一家商店,它是唯一的真理来源。存储中的状态是不可变的,这使得我们更容易知道在哪里可以找到数据/状态。在Redux中,虽然有一个巨大的JSON对象来表示存储,但是您可以始终将代码拆分为多个reducer。这样,就可以用多个reducer在逻辑上分离关注点。对于许多开发人员来说,这是一种更直观的方法,因为他们可以始终引用应用程序状态的单个存储区,并且不存在与当前数据状态相关的重复或混淆的可能性。

Mobx

另一方面,MobX允许多个商店。您可以在逻辑上分离存储区,因此应用程序的所有状态都不在一个存储区中。大多数应用程序设计为至少有两个存储区:一个用于UI状态,一个或多个用于域状态。以这种方式分离存储区的好处是,您也可以在其他应用程序中重用该域。UI存储将特定于当前应用程序。

获奖者:Redux

这个类别的赢家是主观的;这取决于开发者的偏好。我个人喜欢将应用程序的整个状态存储在单个存储中的想法。这有助于我把同一个地方称为真理的唯一来源。有些人可能会说多家商店对他们更有效,更喜欢MobX。

数据结构

Redux

Redux使用普通JavaScript对象作为数据结构来存储状态。使用Redux时,必须手动跟踪更新。在需要维护大量状态的应用程序中,这可能更困难。

Mobx

MobX使用可观测数据。这有助于通过隐式订阅自动跟踪更改。在MobX中,更新是自动跟踪的,因此对开发人员来说更容易。

获奖者:MobX

纯与不纯

Redux

在Redux中,存储中的状态是不可变的,这意味着所有状态都是只读的。Redux中的操作可以调用对状态的更改,reducer可以用新的状态替换以前的状态。这是Redux的核心原则之一。

下面是纯函数的一个简单示例:

function sumOfNumbers(a, b) { return a + b; }

函数将始终返回相同的输出,给定相同的输入。它没有任何副作用或来自外界的影响。

Redux函数使用以下模式编写。reducer是接受一个状态和动作并返回一个新状态的纯函数。

function(state, action) => newState

这让Redux变得纯洁。如果您有兴趣了解更多关于纯函数以及它们在Redux中如何操作的信息,您可以阅读本文以获得更好的理解。这是Redux最好的特性之一。

Mobx

在MobX中,状态是可变的,这意味着您可以简单地用新值更新状态。这让黑帮变得不纯洁。不纯函数很难测试和维护,因为它们并不总是返回可预测的输出。

获奖者:Redux

由于Redux存储是纯的,因此更容易预测,并且很容易恢复状态更新。在MobX的情况下,如果操作不当,状态更新可能会使调试更加困难。

样板代码

Redux

关于Redux最大的抱怨之一是它附带的大量样板代码。当您将React与Redux集成时,会产生更多的样板代码。这是因为Redux本质上是显式的,很多功能都必须显式地编码。

Mobx

MobX更隐式,不需要很多特殊工具。与Redux相比,它的样板代码要少得多。这使得MobX更容易学习和设置。

获奖者:MobX

开发者社区

对于开发人员社区,Redux轻而易举地赢得了胜利。Redux附带了reduxdev工具,供成千上万的开发人员使用。它为调试Redux代码提供了惊人的支持。

MobX还提供开发人员工具,但它们没有Redux提供的相同质量的调试支持。

GitHub统计数据很好地表明了两个库的社区参与度。Redux拥有约48k星,超过672位投稿人。另一方面,MobX拥有大约1.9万星和155名投稿人。

如果我们看看npm的下载量,Redux是遥遥领先的。Redux平均每周下载300万次,MobX平均每周下载25.4万次。这表明Redux被广泛采用。

获奖者:Redux

可扩展性

由于Redux更加固执己见,并且期望reducer函数是纯的,因此它比MobX更容易扩展。Redux的固执己见和纯粹的特性使得应用程序具有可伸缩性。

纯函数更容易测试,因为它们是可预测的和简单的。这就产生了可伸缩的可维护代码。这是选择Redux而不是MobX的核心优势之一。

获奖者:Redux

结论

好吧,判决结果如何?基于开发人员社区、流行度和可伸缩性,Redux的性能优于MobX。但是,如果你想快速跟上速度,用更少的样板代码构建简单的应用程序,MobX可能是你的朋友。


本文:http://jiagoushi.pro/node/1281

本文分享自微信公众号 - 首席架构师智库(jiagoushipro),作者:南极真君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-11-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【服务网格架构】Envoy和类似的系统比较

    总的来说,我们相信Envoy为现代服务导向架构提供了独特且引人注目的功能。下面我们比较一下Envoy和其他相关的系统。尽管在任何特定的领域(边缘代理,软件负载平...

    首席架构师智库
  • Envoy和类似的系统比较

    总的来说,我们相信Envoy为现代服务导向架构提供了独特且引人注目的功能。下面我们比较一下Envoy和其他相关的系统。尽管在任何特定的领域(边缘代理,软件负载平...

    首席架构师智库
  • [第二部:容器和微服务架构] (7)分布式数据管理的挑战与解决方案

    定义微服务边界可能是任何人遇到的第一个挑战。每个微服务都必须是应用程序的一部分,每个微服务都应该是自主的,具有它所传递的所有好处和挑战。但是你如何确定这些界限呢...

    首席架构师智库
  • 从设计的角度看 Redux

    你知道 Redux 真正的作用远不止状态管理吗? 你是否想要了解 Redux 的工作原理? 让我们深入研究 Redux 可以做什么,它为什么做它的事情,它的缺点...

    前端小智@大迁世界
  • 设计师都能懂的 Redux 指南

    你知道 Redux 真正的作用远不止状态管理吗? 你是否想要了解 Redux 的工作原理? 让我们深入研究 Redux 可以做什么,它为什么做它的事情,它的缺点...

    桃翁
  • 还在纠结 Flux 或 Relay,或许 Redux 更适合你

    时见疏星
  • Java并发编程实战 03互斥锁 解决原子性问题

    Java并发编程实战 01并发编程的Bug源头 Java并发编程实战 02Java如何解决可见性和有序性问题

    Johnson木木
  • 自己平时用到的设计模式总结

    作为对象的创建模式,单例模式确保其某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类。单例模式有以下特点:

    小勇DW3
  • Sentinel断路器与熔断降级【源码笔记】

    Sentinel的熔断降级通过断路器实现,本文通过介绍熔断器的定义、如何构建熔断器、断路器校验逻辑、断路器状态转换、异常/慢调用熔断流量是如何统计等方面梳理断路...

    瓜农老梁
  • 测试

    摘要:本文通过断点追溯源码的方式,来逐步展示SpringBoot的核心功能实现原理:自动化配置;

    IT云清

扫码关注云+社区

领取腾讯云代金券