Recoil 状态管理方案的浅入浅出

本文作者：江水

背景: Recoil 是 Facebook 推出的一款专门针对React应用的状态管理库，在一定程度上代表了目前的一种发展趋势，在使用时觉得一些理念很先进，能极大地满足作为一个前端开发者的数据需求，本文对 Recoil 的这些特性做一个梳理。

根据官网的介绍，Recoil 的数据定义了一个有向图 (directed graph)，状态的变更是通过改变图的根节点 (atom)，再通过纯函数 (selector) 流向 React 组件。

同时 Recoil 的状态定义是增量和分布式的，增量意味着我们可以在用的时候再定义新的状态，而不必将所有状态提前定义好再消费。分布式意味着状态的定义可以放在任何位置，不必统一注册到一个文件中。这样的好处是一方面可以简化状态的定义过程，另一方面也可以很好地应用在 code-splitting 场景。

在一个应用中开启 Recoil 非常简单，只需要包裹一个 RecoilRoot 即可。

```js import { RecoilRoot } from 'recoil';

ReactDOM.render( , root); ```

状态定义，原子和选择器

Recoil 允许使用 atom 和 selector 两个函数定义基础和推导状态。

atom 基本用法，这里定义了相关的原子属性，需要使用唯一 key 来描述这个 atom 。 Recoil 中不允许重复的 key 出现，包括后面提到的 selector 。

```js const firstNameAtom = atom({ key: 'first name atom', default: '' });

const lastNameAtom = atom({ key: 'last name atom', default: '' }); ```

使用时通过 useRecoilState 这个 hooks 获取状态，可以看到它和 useState 很像，所以可以很轻松地将传统的React状态迁移到 Recoil 中。

```diff function UserProfile() { - const [firstName, setFirstName] = useState(''); + const [firstName, setFirstName] = useRecoilState(firstNameAtom);

return (

很多时候我们只想获取数据而不想修改，或者反之，此时可以用语法糖 useRecoilValue 和 useSetRecoilState

```js function UserProfile() { const firstName = useRecoilValue(firstNameAtom);

return (

Recoil 会根据哪里用到了这些状态自动建立一种依赖关系，当发生变更时 Recoil 只会通知对应的组件进行更新。

selector 的用法和 atom 很像，构造一个 selector 至少需要一个唯一的 key 和 get 函数。

js const nameSelector({ key: 'my name selector', get: ({ get }) => { return get(firstNameAtom) + ' ' + get(lastNameAtom); } });

在 selector 中可以读写任意 atom / selector ，没有任何限制。只有 get 方法的 selector 是只读的，如果需要可写，也支持传入 set 方法。

js const nameSelector({ key: 'my name selector', get: ({ get }) => { return get(firstNameAtom) + ' ' + get(lastNameAtom); }, set: ({ get, set }, value) => { const names = value.split(' '); set(firstNameAtom, names?.[0]); set(lastNameAtom, names?.[1]); } });

值得一提的是，selector支持从网络异步获取数据，这里才是有趣的开始，也是和其他状态管理的最大的不同，Recoil的状态不仅是纯状态，也可以是来自网络的状态。

js const userSelector = selector({ name: 'user selector', get: () => { return fetch('/api/user'); } });

使用 selector 时和 atom 一样可以通过 useRecoilState, useRecoilValue, useSetRecoilState 这几个 hook。

```js function App() { const user = useRecoilValue(userSelector);

...

} ```

这样的特性使得我们的代码很容易重构，假如一开始一个属性是一个 atom, 后面希望变成一个计算属性，此时可以很轻松地替换这部分逻辑，而无需修改业务层代码。

Recoil 还可以更强大，用下面一张图可以大致概括下，其完全可以当成一个统一的数据抽象层，将后端数据通过 http, ws, GraphQL 等技术映射到前端组件中。

atomFamily selectorFamily 批量创建状态的解决方案

在一些场景中会有需要批量创建状态的情况，我们会实例化多个相同的组件，每个组件都需要对应一个自己独立的状态元素，此时就可以使用 xxxFamily api。

```js const nodeAtom = atomFamily({ key: 'node atom', default: {} });

function Node({ nodeId }) { const [node, setNode] = useRecoilState(nodeAtom(nodeId)); } ```

可以看到，atomFamily 返回的是一个函数，而不是一个 RecoilState 对象。传入不同的 nodeId 会检查是否之前已存在，如果存在则复用之前的，不存在则创建并使用默认值初始化。

同理，对于 selectorFamily 。

``js const userSelector = selectorFamily({ key: 'user selector family', get: (userId) => () => { return fetch(/api/user/${userId}`); } });

function UserDetail({ userId }) { const user = useRecoilValue(userSelector(userId)); } ```

由于批量创建可能会导致内存泄漏，所以 Recoil 也提供了缓存策略管理，分别为 lru, keep-all, most-recent，可以根据实际需要选取。

Suspense 与 Hooks

上文提到每个 atom, selector 背后可以是本地数据，也可以是网络状态（对，没错， atom 也可以是个异步数据，常用的如 atom 初始化是个异步，后续变成同步数据），在组件消费时无需关心背后的实际来源，使用远程数据就像使用本地数据一样轻松。

来看一个普通的获取数据并展示组件的例子。

```js function getUser() { return fetch('/api/user'); }

function LocalUserStatus() { const [loading, setLoading] = useState(false); const [user, setUser] = useState(null);

useEffect(() => { setLoading(true); getUser().then((user) => { setUser(user); setLoading(false); }) }, []);

if (loading) { return null; }

return (

对于这种开发习惯 (往往被称为 Fetch-on-Render）：我们需要一个 useEffect 来获取数据，再需要设置一些 loading, error 状态处理边界状态，如果这个数据不是一个放在全局且处在顶层的数据，而是散落在子组件中消费，则每一个使用的地方都要执行类似的逻辑。

下面看下 Recoil 的写法

```js const localUserAtom = atom({ key: 'local user status', default: selector({ // <-------- 默认值来自 selector key: 'user selector', get: () => { return fetch('/api/user'); } })
});

function LocalUserStatus() { const localUser = useRecoilValue(localUserAtom);

return (
  <div>
    { localUser.name }
  </div>
)

} ```

这里在组件层是不关心数据从哪来的， Recoil 会自动按需请求数据。

相比之下，后者的代码就简洁许多(Render-as-You-Fetch)，而且背后并没有发明新的概念，用到的都是 React 原生的特性，这个特性就是 Suspense。

如果使用了一个异步的 atom 或 selector ，则外层需要一个 Suspense 处理网络未返回时的 loading 状态。也可以套一层 ReactErrorBoundary 处理网络异常的情况。

```js // UserProfile 中使用了一个需要从网络中加载的数据 function LocalUserStatus() { const user = useRecoilValue(localUserAtom);

... }

function App() { return (

    <Suspense fallback={<Loading />}>
        <LocalUserStatus />
    </Suspense>

    <div>底部</div>
</div>