如果不是 Redux 那是什么?
如果不是 Redux 那是什么?
原文:https://medium.com/hackernoon/if-not-redux-then-what-fc433234f5b4
Redux 的创始人丹·阿布拉莫夫(Dan abra mov)最近发表了一篇文章《 你可能不需要 Redux 》,他在文章中指出,开发者在构建 React 应用程序时选择 Redux 作为事实,甚至没有考虑他们是否真的需要它。
Redux 不应该受到指责。像任何其他库一样,它提供了一些折衷,比如通过接触三个文件来完成简单的任务,将状态和动作描述为简单的对象和数组,以及通过纯函数来处理逻辑。这些约束使得调试更容易,测试性更好,保证用户界面的状态是可预测的,以及更多现成的东西。
但是,写这么多做这么少带来了一些烦恼,并减缓了整体发展。
我们真的需要一个状态管理库吗?
难道我们不能将普通的 ES6 类定义为模型,并将它们的实例存储在一个数组集合中,而不使用库吗?是的,我们可以!但是,问题不在于数据存储或检索。
真正的问题是我们如何检测数据突变并处理它的副作用。数据突变的副作用包括以下行为
- 将用户界面与数据变化同步
- 重新计算已计算的变量
- 导航到不同的路线
如果我们使用赋值操作符(如 user.name = "John Doe ")改变数据,我们就没有机制来检测这种变化( Object.observe() 已被否决)。
这正是我们需要状态管理库的地方。
Redux 通过称为 reducers 的纯函数强制数据突变来检测这种变化。
其他框架如何解决?
- 脏检查: Angular 1.x 使用了脏检查机制,在连续的周期中对新旧数据树进行深度比较。一开始这很诱人,但是会在大规模中扼杀性能。
- 反应式编程: Angular 2 和 Meteor 使用反应式编程的概念,使得数据传播和变化检测易于理解和扩展。
- 观察者模式:与反应式编程概念类似,观察者模式在数据突变时触发事件。 Knockout.js 和 MobX 使用观察者模式。
- Setter 和 Getter: 古老的 Setter 和 Getter 方法解决了多年来被成员和骨干使用的变更检测问题。
Redux 的替代品有哪些?
this.setState()
React 自带组件级的变更检测方法。如果您是 React 新手,就坚持使用 this.setState()方法。它适用于小型应用程序。例如:简单的待办事项应用
使用 React 的反应模式和观察者模式
- MobX (又名 mobservable ) : 它的占地面积非常小。如果你习惯使用面向对象的模式,这一个是给你的。使用 ES6/7 装饰器,你几乎感觉不到你在使用任何库。
- RxJS:“JavaScript 的反应式扩展”。RxJS 本身就是野兽。简单来说,RxJS =可观测量+算子+调度器。尽管它作为一个独立的库而闻名,但它为 React 提供了一些简洁的绑定。
其他 Flux 实现
- Alt:同构的 flux 实现哪个干净易懂。您需要像其他 flux 实现一样将监听器连接到组件。
- 回流:Flux 架构的早期实现之一,有一定的局限性,大部分使用回流的开发者已经迁移到 Redux 或者其他库。
- 中继T4:脸书搭建的官方框架,在后端使用 React 和 GraphQL 协议。 Relay 的 Container components 与使用 connect()方法创建的 Redux 的 Container components 直接比较。
我的个人选择: MobX
【2017 年 10 月 24 日更新】我已经开始使用 mobx 状态树 ,这是一个状态容器,使用 mobx。
为什么是 MobX?
- MobX 最大的优点是省去了为数据更改添加监听程序的麻烦,它透明地将反应式编程概念(TFRP)应用到数据模型中,并在需要时更新 UI 的一部分。
- 面向对象概念为赢:你可以使用好的旧的面向对象概念,并应用到你的应用程序中的数据模型。
- 易于文档化和交流作为技术负责人,MobX 让我的工作变得非常易于文档化所有类和存储,以及需要构建的属性和方法。
- 快速开发:相比其他库,你可以专注于应用程序的业务逻辑并以更快的速度交付产品。
- 有反应时增加生命周期挂钩:mobx-reaction 增加名为component will reaction()的生命周期挂钩进行反应性更新。此挂钩可用于路由器和导航器。
权衡?
如果你选择一个库而不是另一个库,你会得到一些东西,也会失去一些东西。以下是 MobX 提供的一些权衡:
- 由于我们使用类和派生对象而不是普通的 JavaScript 对象,因此数据不能立即序列化。您需要为每个类编写自己的 toJS()和 fromJS()方法
- 每次当数据离开执行环境时,都需要对数据进行序列化,例如在进行 API 调用、将其存储在 LocalStorage 中、从其他数据源填充后端中的存储等时。
- 与 Redux 不同,撤销/重做和数据更改的时间旅行等功能需要手动构建。
底线
您必须使用 React 的特定状态管理库,这并不是一成不变的。这是你和你的团队对范式的个人选择。社区有时会误导人。所以,在你包含一个库之前,要再三考虑库提供的约束和权衡。
我错过什么了吗?如有任何更正、意见和讨论,请随时回复文章。
如果你喜欢这篇文章,考虑推荐它。我是 Sanket ,我们正在 GeekyAnts 建立 NativeBase.io 。
黑客中午是黑客如何开始他们的下午。我们是 @AMI 家庭的一员。我们现在接受投稿并乐意讨论广告&赞助机会。
要了解更多信息,请阅读我们的“关于”页面、在脸书上给我们点赞/发消息,或者简单地说, tweet/DM @HackerNoon。