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 产生的派生值进行缓存，提高了计算的效率。