使用 recoil outside - Javascript

Recoil 是一个由 Facebook 开发的状态管理库，可以帮助我们更轻松地管理应用程序的状态。在本文中，我们将介绍如何在 JavaScript 项目中使用 Recoil。

安装

首先，我们需要在项目中安装 Recoil：

npm install recoil

或者使用 Yarn：

yarn add recoil

创建状态

在开始使用 Recoil 之前，我们需要定义我们的状态。我们可以使用 atom 函数来创建状态。atom 函数具有以下参数：

• key：一个唯一的标识符，用于识别该状态。
• options：该状态的选项属性。
• default：该状态的默认值。

例如，我们可以创建一个代表计数器的状态：

import { atom } from 'recoil';

export const counterState = atom({
  key: 'counterState',
  default: 0,
});

使用状态

接下来，我们可以使用 useRecoilState 和 useRecoilValue 钩子来访问该状态。useRecoilState 钩子用于读取和更新状态，而 useRecoilValue 钩子则只用于读取状态。

import { useRecoilState, useRecoilValue } from 'recoil';
import { counterState } from './atoms/counterState';

function Counter() {
  // 读取 counterState 状态
  const [counter, setCounter] = useRecoilState(counterState);

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>增加</button>
    </>
  );
}

function DisplayCounter() {
  // 只读取 counterState 状态
  const counter = useRecoilValue(counterState);

  return <p>Counter: {counter}</p>;
}

组合状态

我们可以使用 selector 函数来计算和组合状态。selector 函数接收一个对象，它包含以下属性：

• key：这个 selector 的唯一标识符。
• get：计算 selector 的函数。
• set：更新 selector 的函数（可选）。

例如，我们可以创建一个 selector 来计算计数器是否是偶数：

import { selector } from 'recoil';
import { counterState } from './atoms/counterState';

export const isEvenSelector = selector({
  key: 'isEvenSelector',
  get: ({ get }) => {
    const counter = get(counterState);
    return counter % 2 === 0;
  },
});

我们可以像访问普通状态一样使用 selector。

import { useRecoilValue } from 'recoil';
import { isEvenSelector } from './selectors/isEvenSelector';

function DisplayEven() {
  // 只读取 isEvenSelector 状态
  const isEven = useRecoilValue(isEvenSelector);

  return <p>Is even: {isEven ? '是' : '否'}</p>;
}

总结

在本文中，我们介绍了如何在 JavaScript 项目中使用 Recoil。我们创建了状态、使用了钩子来访问单一和组合的状态，并学习了如何创建 selector 函数。Recoil 是一个非常强大的状态管理库，它可以帮助我们更轻松地管理应用程序的状态。