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

发布于:2020 年 6 月 2 日 09:25

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

阅读数:2 发布于:2020 年 6 月 2 日 09:25

评论

发布
暂无评论