Facebook 的 React 状态管理库 Recoil？

说到状态管理器，轮子满天飞。在 Class 时代，redux 与 mobx 几乎占据了全部市场，几乎没有没用过 redux 的同学。随着 Hooks 的诞生，新的一批轮子应运而生，其中有代表性的有 unstated-next、constate 等等。
当然无论什么轮子，要解决的问题都是一样的：跨组件状态共享。在解决这个核心问题的同时，需要尽可能的满足以下几个特性：

• TypeScript 支持
• 友好的异步支持
• 支持状态互相依赖
• 同时支持 Class 与 Hooks 组件
• 使用简单

Recoil 体验

最近，facebook 官方出了一个状态管理器解决方案 Recoil，我们来体验一下。

准备工作

使用 Recoil，我们需要在项目最外层包一个 RecoilRoot ，这个和大部分状态管理器一致，通过 context 来跨组件传递数据。

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

function App() {
  return (
    
        ...
    
  );
}

跨组件状态共享

状态最简单的就是定义和使用。在 Recoil 中，通过 atom 来定义一个状态。

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

如上面的代码所示，我们定义了一个 inputValue 状态，它的默认值是空字符串。
需要注意的是 key 字段，它应该是全局唯一的。这个 key 主要为了 debug 方便，持久化数据（数据恢复时的唯一标识），以及可以方便的看到全局 atoms 树。

消费状态也比较简单，通过 useRecoilState 来消费状态。

import React from "react";
import { useRecoilState } from "recoil";
import { inputValue } from "../store";

const InputA = () => {
  const [value, setValue] = useRecoilState(inputValueState);

  return  setValue(e.target.value)} />;
};

export default InputA;

是不是很简单？Recoil 的基础用法就是这样的。我在这里写了一个 demo，你可以体验下。

}> ); }

评价

优点

• 之前状态管理器满天飞，如果官方能一统天下，应该算一件好事情。
• 对 React concurrent 模式支持良好。

不足

当前 Recoil 还处于开发阶段，文档都还不是很全。基于现状，说几点我的感受。

1. 没有使用 ts 实现，目前不支持 ts

这点我很惊讶，也是写这个文章的时候才发现的，很奇怪。讲道理 Recoil 支持 typescript 应该是顺手的事情，可能后期需要来个 @types/recoil 吧。

2. 目前没有支持 Class 组件消费状态。

这个特性应该是必备的，应该不会彻底抛弃 Class 组件。估计下个版本肯定会支持的这个特性的。实现成本较低，不支持的话就太反人类了。

3. API 偏多，有一定上手成本。