资讯专栏INFORMATION COLUMN

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

snifes / 3159人阅读

摘要:它是由一个非常聪明的人开发的,用来缓解在单页面应用中管理状态的问题。的问题没有一种适合所有场景的完美工具。为设计的是世界的另一个新增内容,但目前仅适用于。这将导致最后期限延长,并且留下更多需要我们维护的代码。

原文: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?你要处理数组吗?再加上像 lodash 或 Ramda。如果你不使用 Babel 和 Axios,以及一个好的 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 不是作为状态容器而设计的,但它们可以轻松管理大部分数据。强烈建议试试这两个库,看看它们是否适合你的项目。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88605.html

相关文章

  • 2017-09-23 前端日报

    摘要:知乎专栏前端给不了解前端的同学讲前端掘金前端够得到安全跨站请求伪造掘金前端面试问题持续更新掘金向核心贡献代码的六个步骤基于的仿音乐移动端个人文章用构建组件网易严选感受开发已完结掘金英文 2017-09-23 前端日报 精选 [译] 网络现状:性能提升指南前端够得到Web安全3--点击劫持/UI-覆盖攻击React, Jest, Flow, Immutable.js将改用MIT开源协议N...

    BingqiChen 评论0 收藏0
  • 【译】Redux 还是 Mobx,让我来解决困惑!

    摘要:我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的,因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式,但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...

    txgcwm 评论0 收藏0
  • React 328道最全面试题(持续更新)

    摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...

    kumfo 评论0 收藏0
  • 前端面试总结(at, md)

    摘要:面试官比较着急了,跟我沟通的时候,我才知道返回值不一定非要跟原生的一样。腾讯一面平常开发怎么设计组件的。总结腾讯面试的感觉就是,没有那么正式,都是部门的技术直接联系的你,然后二面就是部门负责人了,决定了是否入职。 引入 面试过去了这么久,把八月份面试题和总结发一下吧,虽然年底大家可能都不换工作~ 还是可以看看的。 关于面试,引用叶老湿的一句话。你的简历是自己工作的答卷,项目经历是你给面...

    zhunjiee 评论0 收藏0
  • 我为什么从Redux迁移到了Mobx

    摘要:需要注意的是,在中,需要把数据声明为。同时还提供了运行时的类型安全检查。在利用了,使异步操作可以在一个函数内完成并且可以被追踪。例如在中,数组并不是一个,而是一个类的对象,这是为了能监听到数据下标的赋值。 Redux是一个数据管理层,被广泛用于管理复杂应用的数据。但是实际使用中,Redux的表现差强人意,可以说是不好用。而同时,社区也出现了一些数据管理的方案,Mobx就是其中之一。 R...

    DevYK 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<