Recoil 是 React 的状态管理库

Recoil 是 React 的状态管理库，因此你需要将 Recoil 安装到 React 项目中才能使用。创建 React 项目最方便且推荐的方式是使用 Create React App：

npx create-react-app my-app

Recoil 软件包已经发布到 npm 上了。要安装 Recoil 的最新版本，请执行如下命令：

npm install recoil

对于使用 Recoil 的组件，需要将 RecoilRoot 放置在组件树上的任一父节点处。最好将其放在根组件中：

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';


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

一个 atom 代表一个状态。Atom 可在任意组件中进行读写。读取 atom 值的组件隐式订阅了该 atom，因此任何 atom 的更新都将导致订阅该 atom 的组件重新渲染：

const textState = atom({
  key: 'textState', // unique ID
  default: '', // default value
});

在需要向 atom 读取或写入的组件中，应该使用 useRecoilState()，如下所示：

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}


function TextInput() {
  const [text, setText] = useRecoilState(textState);


  const onChange = (event) => {
    setText(event.target.value);
  };


  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Recoil 是 Facebook 开源的 React 状态管理库，目前处于实验性阶段。Recoil 是 Hooks 组件的状态管理。不能在类组件里面使用。使用 useHooks 读写状态和订阅组件。

总结：从 Recoil 的源码中，可以了解到其通过订阅和更新的分离，确保最小粒度的渲染，以及最小化了数据的单位，利用 selector 产生的派生值进行缓存，提高了计算的效率。