Recoil的创建是为了提供Redux的替代方案，这是另一个流行的国家管理库。在今天的冒险中，我们将看到什么是后坐力，它的工作原理，为什么您可能想在React应用中使用 ..

有了武士的精神，让我们开始冒险..

安装后坐力

您可以通过在终端中运行以下命令来使用npm或yarn安装后坐力：

npm install recoil

使用后坐状态的组件需要 RecoilRoot 出现在父树中的某个地方。放在根部组件中的一个好地方：

import React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

这确保了所有需要它的儿童组件的状态，并避免了由于缺少 Ricoilroot 组件而无法访问状态的任何潜在问题。

什么是后坐力？

后退是Facebook于2020年发布的React的州管理库。它提供了一种简单而直观的方式来管理React应用程序的状态。后坐力是建立在React的上下文API 之上的，该API 用于将数据传递到组件树。无论如何，后坐力提供了一种比上下文API更强大，更灵活的管理应用程序状态的方法。

后坐力背后的核心思想是状态应定义为原子的集合。原子是可以通过组件读取和更新的状态。 组件可以订阅原子在其价值变化时被通知。后坐力还提供选择器，它是从原子或其他选择器中得出新状态的函数。选择器可用于从应用程序的状态计算派生数据。

后坐力如何工作？

后坐力通过定义代表应用程序状态的原子和选择器的集合来起作用。原子是使用atom()函数定义的，它将初始值作为参数。选择器是使用selector()函数定义的，该函数采用了将派生状态计算为参数的函数。

创建一个原子

以后坐力的方式，一个原子是一个状态单位，可以由应用程序的不同部分读取并写入。要创建一个原子，您可以使用后退库中的原子函数。

向您展示我的意思..

import { atom } from 'recoil';

export const weaponState = atom({
  key: 'weaponState',
  default: {
    name: 'Katana',
    damage: 50,
  },
});

在组件中使用原子

组件可以订阅 Atoms 和选择器。
要在组件中使用weaponState原子，您可以使用Racoil库中的useRecoilState钩。

向您展示我的意思..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponState } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

根据上述实例，我们使用useRecoilState钩访问weaponState Atom及其当前值。我们还提供一个按钮，该按钮允许用户通过将原子设置为新值来升级其武器。

创建选择器

选择器是允许您从后坐力原子得出状态的函数。它们可用于计算复杂值或从多个原子汇总数据。

向您展示我的意思..

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

export const weaponDamageSelector = selector({
  key: 'weaponDamageSelector',
  get: ({ get }) => {
    const weapon = get(weaponState);
    return weapon.damage;
  },
});

在组件中使用选择器

然后，我们可以在组件中使用选择器使用useRecoilValue钩子与 Atoms 。

向您展示我的意思..

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponDamageSelector } from './selectors';

function WeaponDisplay() {
  const weaponDamage = useRecoilState(weaponDamageSelector);

  return (
    <div>
      <p>Weapon damage: {weaponDamage}</p>
    </div>
  );
}

创建一个原子

在武士世界中，一个氏族可能有多个武士，每个氏族都有自己独特的特征和能力。同样，在React应用程序中，您可能有多个需要共享状态但具有不同标识符或密钥的组件。

这就是atomFamily派上用场的地方。它使您可以创建一个共享相同结构但具有不同键或标识符的原子家族。例如，假设我们要创建一个代表氏族不同武士武器的原子家族。

import { atomFamily } from 'recoil';

export const weaponAtomFamily = atomFamily({
  key: 'weaponAtomFamily',
  default: id => ({
    name: `Weapon - ${id}`,
    damage: 50,
  }),
});

在上面的实例中，默认函数中的id参数是家庭中每个原子的唯一标识符。因此，当我们调用weaponAtomFamily('Wakizashiv')时，默认函数将以“ wakizashiv”为id参数调用，并将返回代表该武士默认武器的对象。

在组件中使用原子

atomFamily()的选项与简单的atom()几乎相同。但是默认值也可以被参数化。这意味着您可以提供一个获取参数值并返回实际默认值的函数。

import React from 'react';
import { useRecoilState } from 'recoil';
import { weaponAtomFamily } from './atoms';

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponAtomFamily('Wakizashiv'));

  return (
    <div>
      <h1>{weapon.name}</h1>
      <p>Damage: {weapon.damage}</p>
      <button onClick={() => setWeapon({ name: 'Weapon - Nodachi', damage: 70 })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

为什么使用后坐力？

后坐力比其他国家管理库为REDUX等其他国家管理库提供了一些好处。让我们看看您可能想在React项目中使用后坐力的一些原因：

简化的国家管理

后退提供了一种管理React应用程序状态的更简单，更直观的方法。使用后坐力您可以定义 Atoms 和选择器代表应用程序状态的选择。组件可以订阅这些原子和选择器时的价值变化时被通知。

没有样板

后坐力还减少了管理React应用程序状态所需的样板代码的量。它使您可以用最小的样板代码定义原子和选择器。
在其他方面，在 redux 中，您需要定义动作，动作创建者，还原器和存储对象来管理应用程序的状态。

更好的性能

后坐力比其他国家管理库提供了更好的性能。这是因为后坐力使用一种称为依赖关系图的新算法，它使其可以更有效地跟踪原子和选择器之间的依赖项。依赖关系图可确保仅当原子或选择器的状态更改的状态改善您的应用程序的性能时，才需要重新渲染需要重新渲染的组件。

熟悉的语法

后坐力使用的语法类似于react的内置挂钩，例如useState()和useEffect()。这使得对后坐力易于学习和使用已经熟悉React的开发人员。

灵活且可扩展

后坐力设计为灵活和可扩展。它可用于管理具有复杂状态要求的小型或大型应用程序的状态。它允许您定义代表应用程序状态不同部分的原子和选择器，并提供用于管理这些原子和选择器之间依赖关系的工具。

后坐力和Redux战役

让我们一起展开冒险的最后一章，作为无畏的武士战士。

什么是原子效应？

ATOM效应是后坐力中的一个功能，可让您在原子值变化时执行副作用。副作用是任何在原子状态之外产生影响的操作。例如网络请求，本地存储或记录。

原子效应通过效果选项附在原子上。每个原子都可以引用这些原子效应函数的数组，这些函数在初始化原子时以优先顺序调用。

在原子效果的帮助下，您可以将订阅添加到原子的价值变化时会触发的原子。订阅可以执行应用程序所需的任何副作用。副作用可以同步或异步。

原子效应在您需要根据应用程序的当前状态执行副作用的情况下很有用。例如，您可能需要将用户的首选项保存到本地存储时，只要他们更改设置页面。

原子效应是塑造我们周围世界的隐藏力，就像武士的剑受到其原子的看不见相互作用所塑造一样。

向您展示我的意思..

import { atom, useRecoilState } from 'recoil';

export const weaponState = atom({
  key: "weaponState",
  default: {
    name: "Katana",
    damage: 50,
  },
  /* Atom Effects */
  effects: [
    ({ onSet }) => {
      onSet(weapon => {
        console.log(`The weapon has upgrade to ${weapon.name}`);
      });
    },
  ],
});

function WeaponDisplay() {
  const [weapon, setWeapon] = useRecoilState(weaponState);

  return (
    <div>
      <h1>{weapon.name}</h1>
      <button onClick={() => setWeapon({ name: 'Nodachi' })}>
        Upgrade Weapon
      </button>
    </div>
  );
}

每当weaponState Atom的值更改时，onSet回调都会调用。在上面的实例中，我们只是将原子的新武器记录到控制台，但是我们可以轻松地执行更复杂的副作用。

冒险结束

后坐力是在React上下文API之上构建的，并提供了一种比上下文API更强大，更灵活的管理应用程序状态的方法。它允许您定义代表应用程序状态的原子和选择器。组件可以订阅这些原子和选择器，以便在其价值变化时被通知。后坐力为其他国家管理库提供了一些好处，例如简化状态管理，没有样板，更好的性能，熟悉的语法以及灵活性和可扩展性。如果您正在寻找用于您的React项目的州管理库，那么反冲绝对值得考虑。

动机

ð支持

请考虑以下并通过订阅我们的渠道来支持我们。非常感谢您的支持，并将帮助我们继续创建内容供您享受。预先感谢您的支持！

YouTube
GitHub
Twitter