首页
学习
活动
专区
工具
TVP
发布

Recoil:面向React的新的状态管理库

Recoil是Facebook推出的一个全新的、实验性的JavaScript状态管理库,它解决了使用现有Context API在构建较大应用时所面临的很多问题。

因为React主要是一个UI库,开发人员通常会在使用React的同时使用一个状态管理方案以简化数据的处理。

很多现有的状态管理方案都是基于React在2014年引入的Flux架构的。然而,尽管像Redux和MobX这样的库能够确保应用的状态保持一致,但是对于很多应用来讲,它们所带来的开销是难以估量的。

为了解决这个问题,React引入了一个简单的替代方案Context API,它允许开发人员通过组件树共享数据,而不必在每个级别手动传递属性。

Recoil为开发人员提供了另外一个解决方案,这些开发人员可能想要避免使用那些已经成熟的状态管理系统,但是又觉得Context API太具局限性。

如官方文档所述,Recoil通过解决Context API的三个问题实现了这一点。

  1. 组件状态只能通过往上推送至公共祖先来进行共享,这可能包含一个巨大的树,随后这个树需要重新渲染。
  2. Context只能存储一个值,而不能存储一组不确定的值,让每个值都有自己的消费者。
  3. 以上两点使得将树的顶部(状态必须要存在的地方)与树的叶子(状态被使用的地方)进行代码分离变得非常困难。

Recoil使用Atom和Selector来管理应用的数据。每个Atom包含一个唯一的键和一段它将要管理的数据,而每个Selector代表一个衍生状态,该衍生状态可以是基于多个Atom的。

关于如何组合这两者,有一个非常棒的样例,那就是流行的todo应用,它包含了两个Atom和一个Selector。

为了管理应用的数据,我们创建了两个Atom。第一个包括原始的列表项,而第二个包含了过滤器(“已完成”、“未完成”和“全部”等)。

为了展现这个todo列表,我们使用Selector基于选中的过滤器来过滤todo项。

关于完整的todo教程和良好的入门指南,请访问官方文档

Recoil基于MIT许可证发布,可以通过GitHub获取。

请注意,Recoil只是一个实验性的解决方案,还不能在生产环境的应用中使用。

原文链接: Recoil - a New State Management Library for React

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/tz6OAT2AV3yZQjyQ4XEo
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券