152. 精读《recoil》-优快云博客

本文深入解析Facebook推出的Recoil数据流管理方案，探讨其在React全局状态管理中的应用，包括原子状态管理、派生数据、异步查询等功能，以及与Redux、Mobx的对比。

1 引言

Recoil 是 Facebook 公司出的数据流管理方案，有一定思考的价值。

Recoil 是基于 Immutable 的数据流管理方案，这也是它值得被拿出来看的最重要原因，如果要用 Mutable 方式管理 React 数据流，直接看 mobx-react 就足够了。

然而 React Immutable 特性带来的可预测性非常利于调试和维护：

断点调试时变量的值与当前执行位置无关，已创建过的值不会突然 Mutable 突变，非常可预测。
在 React 框架下组件更新机制单一，只有引用变化才触发重渲染，而没有 Mutable 模式下 ForceUpdate 的心智负担。

当然 Immutable 模式下存在一定编码心智负担，所以各有优劣。

但 Recoil 和 Redux 一样，并不代表 React 官方数据流管理方案，因此不用带着官方光环去看它。

2 简介

Recoil 解决 React 全局数据流管理的问题，采用分散管理原子状态的设计模式，支持派生数据与异步查询，在基本功能上可以覆盖 Redux。

状态作用域

和 Redux 一样，全局数据流管理需要存在作用域 RecoilRoot：

import React from "react";
import { RecoilRoot } from "recoil";

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

RecoilRoot 在被嵌套时，最内层的 RecoilRoot 会覆盖外层的配置及状态值。

定义数据

与 Redux 集中定义 initState 不同，Recoil 采用 atom 以分散方式定义数据：

const textState = atom({
  key: "textState",
  default: "",
});

其中 key 必须在 RecoilRoot 作用域内唯一，也可以认为是 state 树打平时 key 必须唯一的要求。

default 定义默认值，既然数据定义分散了，默认值定义也是分散的。