Redux 的问题:React、MobX 和 Realm 能解决吗?

前端之家收集整理的这篇文章主要介绍了Redux 的问题:React、MobX 和 Realm 能解决吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原文:The Problems with Redux: Can React,MobX,and Realm save us?

作者:Erich Reich

首先,我不讨厌 Redux。它是由一个 非常聪明的人 开发的,用来缓解在单页面应用中管理状态的问题。而且,确实解决了这个问题。你可以使用 Redux 将状态从高层的 store 连接到每个组件,只 map 该组件需要用到的状态。

在本文中,我想分享我们为客户创建移动应用的一些经验。在 Quantum Mob,我们主要的 webapps 是由React 编写的,而我们的移动技术栈用的是由 React Native。React Native 允许在 Android / iOS 之间共享大部分代码,并且从产品的网页版本重用代码变得更容易,因为它跟普通的 React 很相似。

Redux 的问题

没有一种适合所有场景的完美工具。即使你喜欢某种东西,也要清楚客观地去看待它,特别是那些卖力宣传的东西。你使用它只是因为这很酷,还是因为它是最正确的选择?如果一个东西要求得太多,那么它的宣传根本对不起其本身的价值。

不用怀疑我的话,Dan Abramov 以作者身份写了关于他对 Redux 的看法,试图让人们停下来考虑,Redux 是否真正适合你的项目。

如果你在用 “Redux 方式” 做事的时候感到压力,这表明你或你的团队可能过于看重它了。这只是你们工具箱中的一个工具,一个疯狂的实验。

-Dan Abramov

随着 npm,Node 以及构建工具(grunt,gulp,webpack ...)的出现,在每个项目中需要使用的库和框架在呈爆炸式增长。

你的项目需要处理日期吗?为什么不使用 MomentJs?你要处理数组吗?再加上lodashRamda。如果你不使用 BabelAxios,以及一个好的 CSS 框架,我不能想象那将会怎样。必须确保编译你的同构应用,即使这只是个 Hello World 应用。

问题一:学习曲线

Redux 引入一些概念,你需要花时间去学习它们。将需要翻阅文档并浏览教程,因为不只是简单调用保存,然后再获取数据那么简单。

问题二:配置

要使用 Redux 的话,需要设计好 store,创建多个 reducer 并将其组合在一起。然后,使用 connect 或者其他什么,为每个需要跟 store 交互的组件配置 mapStateToPropsmapDispatchToProps

问题三:“最佳实践”

对于每个组件,都有一个用于 JavaScript 的文件,一个用于样式的文件,另一个用于 JSX。Redux 将这些东西与 action 和 reducer 文件相结合,另一个将其全部整合在一起。确实这样很 Redux,但如果你只想某个地方使用怎么办?对于简单的例子,引入像 Redux 这样强大的工具其实是过度工程的。

备选方案

局部状态(local state)

Redux 的另一种替代方法是保持简单,使用组件的局部状态。意思是保持最开始时候简单的架构就好,只有在需要时才添加 redux。容易吧?

以下是 Dan 的一个 很好的例子,说明如何将一个简单的计数器在不使用 Redux 的情况重构为 Redux 风格的。看看他的文章,写得很好,他是这个话题的权威。

MobX

MobX 比 Redux 更新,现在肯定有很多讨论。MobX 承诺的是提供 Redux 的所有功能,但是更少的样板代码。这个缺点当然是微不足道的,不应该期望它与 Redux 具有相同的控制级别。

MobX 是如何工作的?你可以创建想要 store 的数据模型作为一个 class,并将使用 @observable 装饰器添加到 MobX 管理的地方,而不是把重点放在改变和 reduce 的细节上。

另一件事是,你的对象不必像 Redux 那样进行归一化处理。这在某些情况下可能是件好事,而在其他情况下也可能是件坏事。例如,有一个很大的数组,在通过它搜索某个值的时候可能会遇到性能问题,需要认识到这一点。

如果你想快速了解一下 MobX,可以从这个与 Redux 比较的4分钟的视频开始。

Youtube 上的视频:Understanding MobX vs Redux

如果你喜欢 MobX 官方的说法,请查看他们的 “十分钟介绍”。如果希望看到一个更客观的观点,这里有一个开发者使用 MobX 示例

为 React Native 设计的 Realm

Realm 是 React 世界的另一个新增内容,但目前仅适用于 React Native。如果你正在制作移动应用,那绝对值得一看。除了存储和管理你的域数据之外,Realm 还增加了数个与服务器同步的数据,离线支持和加密功能

为了帮助了解使用 Realm 的理由,他们提出了一个可以快速开始的真实世界的例子。移动应用程序通常执行多次搜索,从而本地存储数据,以避免额外调用影响性能,并提供更好的用户体验。

Youtube 上的视频:Realm

应该将 Realm 视为直接集成到应用程序中的一个数据库。能够提供很好的速度,因为处理的对象引用与数据库具有相同的引用,并将其保存到本地存储,因此任何更改或搜索都不会被序列化或发送到任何地方。

结论

没有任何工具对于每一种情况都是完美的,并不建议彻底放弃 Redux。Redux 很棒,但随之而来的是创建附加的样板代码。这将导致最后期限延长,并且留下更多需要我们维护的代码

在某些组件上使用局部状态是很合适的,如果复杂性发生变化,也可以很容易地使用 Redux 重构。

虽然 MobX 和 Realm 不是作为状态容器而设计的,但它们可以轻松管理大部分数据。强烈建议试试这两个库,看看它们是否适合你的项目。

猜你在找的React相关文章