入门

创建 React 应用

Recoil 是一个用于 React 的状态管理库，因此你需要安装并运行 React 才能使用 Recoil。启动 React 应用程序最简单且推荐的方法是使用 Create React App

npx create-react-app my-app

npx 是一个与 npm 5.2+ 及更高版本捆绑在一起的包运行器工具，请参阅较旧 npm 版本的说明.

有关安装 Create React App 的更多方法，请参阅官方文档.

安装

Recoil 包位于 npm 中。要安装最新稳定版本，请运行以下命令

npm install recoil

或者，如果你使用的是 yarn

yarn add recoil

或者，如果你使用的是 bower

bower install --save recoil

RecoilRoot

使用 recoil 状态的组件需要在父级树中的某个地方出现 RecoilRoot。将它放在根组件中是一个好地方

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

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

我们将在下一节中实现 CharacterCounter 组件。

Atom

一个 atom 代表一块状态。任何组件都可以读取和写入 Atom。读取 Atom 值的组件会隐式地订阅该 Atom，因此任何 Atom 更新都将导致所有订阅该 Atom 的组件重新渲染

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial 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>
  );
}

Selector

一个 selector 代表一块 派生状态。派生状态是状态的转换。你可以将派生状态视为将状态传递给一个纯函数的输出，该函数以某种方式修改给定的状态

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

我们可以使用 useRecoilValue() 钩子来读取 charCountState 的值

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

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

演示

以下是完成后的产品

回声

字符计数0

创建 React 应用​

安装​

RecoilRoot​

Atom​

Selector​

演示​

创建 React 应用

安装

RecoilRoot

Atom

Selector

演示