react全局状态管理_Recoil - Facebook 官方 React 状态管理器

说到状态管理器，轮子满天飞。在 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 (
    <RecoilRoot>
        ...
    </RecoilRoot>
  );
}

跨组件状态共享

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

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

如上面的代码所示，我们定义了一个 inputValue 状态，它的默认值是空字符串。
需要注意的是 key 字段，它应该是全局