Recoil - React 的实验性状态管理库

出于多种原因，使用 React 的内置状态管理功能（例如兼容性、简单性等）而不是外部全局状态是明智之举。不幸的是，它有一些限制，例如：

• 上下文只能存储单个值
• 组件的状态只能通过将其推送到共同祖先来共享

这些限制使得 React 3 中状态存储部分和状态使用部分的代码拆分变得非常困难。就在几天前，Facebook 开源了其状态管理库，解决了上述限制。

畏缩

Recoil是一个针对 React 应用的实验性状态管理库，旨在改进 React 内置状态管理的上述缺陷，同时尽可能保持其 API、语义和行为的React风格。Recoil 提供了一些仅靠 React 难以实现的功能，同时又兼容 React 的最新特性。

Recoil 定义了一个与 React 树正交但又内在关联的有向图。状态变化从该图的根（我们称之为原子）流经纯函数（我们称之为选择器），最终到达组件。

原子和选择器

Recoil 的核心概念是数据流，其中数据从Atoms（共享状态）通过Selectors（纯函数）传输到构建应用程序的 React 组件。

资料来源：David McCabe@recoiljs.org

原子是组件可以订阅的状态单元。它们包含应用程序状态的真实来源。选择器可以同步或异步地转换此状态。使用以下函数创建原子atom()：

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

来源：recoiljs.org

选择器是一个纯函数，它接受原子或其他选择器作为输入。当这些输入发生变化时，选择器函数将被重新执行。React 组件可以订阅选择器，当选择器发生变化时，它们也会重新渲染。

选择器使用以下函数定义selector()：

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

来源：recoiljs.org

Recoil 提出的方法如下：

• 无样板 API，其中共享状态具有与 React 本地状态相同的简单 get/set 接口，
• 与 Concurrent 模式和其他新的 React 功能兼容，
• 通过增量和分布式状态定义实现代码拆分的可能性，
• 无需修改使用它的组件即可替换状态。
• 派生数据可以在同步和异步之间移动，而无需修改使用它的组件。
• 应用程序状态的向后兼容性；持久状态可以在应用程序更改后继续存在。

Recoil 的工作方式和思维方式与 React 类似，能够提供快速灵活的共享状态。将 Recoil 添加到您的应用中，并检查它将如何影响其状态管理。

加速您的 GraphQL API 开发

GraphQL 编辑器是一款支持工具，既适用于高级GraphQL 用户，也适用于 GraphQL API 新手。我们一体化的 GraphQL 开发环境内置了数十项微功能，可帮助您更快地构建、管理和部署GraphQL API 。