Recoil基础

一、简介

在之前的面试中，有人简历里写了这个东西，一脸懵逼，不知道是什么，简单梳理一下

Recoil是FaceBook公司提出的状态管理方案，相当于和React是一脉相承，使用方法也差不多

Recoil采用分散管理原子状态的设计模式

Recoil提出了一个新的管理状态单位Atom，它是可更新和订阅的，当一个Atom更新之后，每个订阅它的组件都会与之更新重新渲染，如果多个组件使用同一个Atom，那么这些组件将会共享他们的状态。

二、基础使用

1、安装

npm install recoil
或
yarn add recoil

2、初始化

使用RecoilRoot包裹根部组件

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

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

3、Atom

const textState = atom({
  key: 'textState', // atom的唯一值，操作中需要使用
  default: '', // 默认值
});

4、组件中使用

function TextInput() {
  const [text, setText] = useRecoilState(textState);// 用法相当于useState,及其容易上手

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

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

5、Selector

selector 代表一个派生状态，派生状态是状态的转换。在mobx中可视为 computed

const charCountState = selector({
  key: 'charCountState', // 唯一值
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

// 相应的取值方法 useRecoilValue

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

6、异步请求

selector也可用来请求数据

const userNameQuery = selector({
  key: 'userName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(userNameQuery);
  return <div>{userName}</div>;
}

三、方法解释

// atom： 一个 atom 表示 Recoil 的 state

// useRecoilState()：当你同时需要对 atom 进行读写时，使用此 hook。使用此 hook 会使组件订阅 atom。
const [text, setText] = useRecoilState(textState)

// useRecoilValue()：当你仅需要读取 atom 时，使用此 hook。使用此 hook 会使组件订阅 atom。
const count = useRecoilValue(charCountState);

// useSetRecoilState()：当你仅需要写入 atom 时，使用此 hook。
const setNamesState =useSetRecoilState(namesState);
// useResetRecoilState()：需将 atom 重置为默认值时，使用此 hook。

const resetList =useResetRecoilState(todoListState);

四、缺点

由于atom的使用方法和Hooks使用方法一致，所以这种方法都不能在纯js中单独使用，会有一些限制，使用时需要传入相应的set方法