Recoil 是 React 状态管理中的武士刀
今天，我尝试用一种全新的方式呈现这篇文章，融入了武士元素。我衷心希望这能为您的阅读体验增添价值。欢迎并感谢您的反馈，请在下方评论区分享您的想法。
🚨重要通知
Recoil目前缺乏更新和维护支持，这引起了社区开发者的担忧。另一方面，许多开发者喜欢使用 Recoil，并认为它是一个非常有用的状态管理库。因此，我们建议在决定是否在新项目中继续使用 Recoil 时谨慎行事。
Recoil 最近一次更新是在 2022 年 10 月 12 日。长期缺乏更新导致一些开发者转而使用其他状态管理库，这可能表明 Recoil 已不再是未来项目的可靠选择。维护人员的缺失可能意味着问题和漏洞无法得到及时解决，从而给您的应用带来麻烦。
如果您选择继续使用 Recoil，我们建议您密切关注其发展动态，并考虑其他替代方案。在为项目选择工具时，做出明智的决定至关重要，我们希望确保读者在做出决定前了解 Recoil 的现状。
请注意，此消息最后更新于2023 年 3 月 9 日，此后 Recoil 的情况可能已发生变化。
祝您编程愉快！
Recoil 的创建是为了提供Redux 的替代方案，Redux是另一个流行的 React 状态管理库。在今天的探索中，我们将了解Recoil 是什么、它的工作原理、为什么你可能需要在 React 应用中使用它等等。
怀着武士精神，让我们开始冒险吧……
安装后坐力——武士之道
您可以使用以下命令在终端中安装npmRecoil 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>
);
这确保所有需要该状态的子组件都能访问到它，并避免因缺少RecoilRoot组件而导致组件无法访问状态的潜在问题。武士之道不容许任何差错。因此，务必保持警惕和荣誉。
什么是后坐力？
Recoil是 Facebook 于 2020 年发布的 React 状态管理库。它提供了一种简单直观的方式来管理 React 应用的状态。Recoil 构建于 React 的Context API之上，后者用于在组件树中传递数据。总而言之，与 Context API 相比，Recoil 提供了一种更强大、更灵活的应用状态管理方式。
Recoil 的核心思想是将状态定义为原子集合。原子是状态的一部分，可以被组件读取和更新。组件可以订阅原子，以便在原子值发生变化时收到通知。
Recoil 还有一个秘密武器——选择器（Selectors），这是一种强大的函数，可以从原子或其他选择器中推导出新的状态。选择器可用于根据应用程序的状态计算派生数据。
Recoil 的工作原理是什么？
Recoil 的精髓源于武士对周遭世界的敏锐洞察。它的工作原理是定义一组原子和选择器，这些原子和选择器共同代表应用程序的状态。原子通过函数定义atom()，该函数接受一个初始值作为参数。选择器通过函数定义，selector()该函数接受一个计算派生状态的函数作为参数。原子和选择器共同构成了 Recoil 的核心。
制造原子
在武士道中，Recoil 中的原子就像一把剑。它是一个状态单元，可以被应用程序的不同部分读取和写入。要创建原子，可以使用 Recoil 库中的 atom 函数。
为了让你明白我的意思……
import { atom } from 'recoil';
export const weaponState = atom({
key: 'weaponState',
default: {
name: 'Katana',
damage: 50,
},
});
在组件中使用原子
组件可以订阅原子和选择器。
要weaponState在组件中使用原子，可以使用useRecoilStateRecoil 库中的钩子。
为了让你明白我的意思……
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原子及其当前值。我们还提供了一个按钮，允许用户通过将原子设置为新值来升级武器。
创建选择器
选择器是允许您从Recoil 原子中导出状态的函数。它们可用于计算复杂值或聚合来自多个原子的数据。
为了让你明白我的意思……
import { selector } from 'recoil';
import { weaponState } from './atoms';
export const weaponDamageSelector = selector({
key: 'weaponDamageSelector',
get: ({ get }) => {
const weapon = get(weaponState);
return weapon.damage;
},
});
在组件中使用选择器
然后，我们可以像使用原子一样，在组件中使用hook 来使用选择器。useRecoilValue
为了让你明白我的意思……
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
`An`atomFamily()接受的选项几乎与简单的 `T` 相同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>
);
}
为什么要使用后坐力？
相比其他 React 状态管理库（例如 Redux），Recoil 具有诸多优势。让我们来看看在 React 项目中使用 Recoil 的一些原因：
简化的状态管理
Recoil 提供了一种更简单、更直观的方式来管理 React 应用的状态。使用Recoil，您可以定义原子和选择器来表示应用的状态。组件可以订阅这些原子和选择器，以便在它们的值发生变化时收到通知。
没有模板
Recoil 还减少了管理 React 应用状态所需的样板代码量。它允许你用最少的样板代码定义原子和选择器。
另一方面，在Redux中，你需要定义 actions、action creators、reducers 和 store 对象来管理应用的状态。
性能更佳
Recoil 比其他 React 状态管理库性能更佳。这是因为 Recoil 使用了一种名为依赖图的新算法，该算法能够更高效地跟踪原子和选择器之间的依赖关系。依赖图确保当原子或选择器的状态发生变化时，只有需要重新渲染的组件才会被重新渲染，从而提升应用的性能。
熟悉的语法
useState()Recoil 使用的语法与 React 内置的 hooks（例如 ` require` 和 `require` ）类似useEffect()。这使得 Recoil 对于已经熟悉 React 的开发人员来说易于学习和使用。
灵活且可扩展
Recoil 的设计兼顾灵活性和可扩展性。它可用于管理具有复杂状态需求的小型或大型应用程序的状态。它允许您定义原子和选择器来表示应用程序状态的不同部分，并提供工具来管理这些原子和选择器之间的依赖关系。
反冲之战与重制版
所以，我的武士同胞们，让我们作为无畏的武士，共同迈向冒险的最终篇章吧……
什么是原子效应？
Atom Effects是 Recoil 的一项功能，它允许你在原子值发生变化时执行副作用。副作用是指任何会对原子状态之外产生影响的操作，例如网络请求、本地存储或日志记录。
原子效应通过 effects 选项附加到原子上。每个原子都可以引用一个原子效应函数数组，这些函数在原子初始化时按优先级顺序调用。
借助 Atom Effects，您可以为 Atom 添加订阅，这些订阅会在 Atom 的值发生变化时触发。订阅可以执行应用程序所需的任何副作用。这些副作用可以是同步的，也可以是异步的。
在需要根据应用当前状态执行副作用的情况下，Atom Effects 非常有用。例如，当用户更改设置页面时，您可能希望将用户的偏好设置保存到本地存储。
原子效应是塑造我们周围世界的隐藏力量，就像武士刀是由其原子间看不见的相互作用塑造而成的一样。
为了让你明白我的意思……
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>
);
}
onSet当原子值发生变化时，就会调用回调函数。weaponState在上面的例子中，我们只是将原子的新武器值记录到控制台，但我们也可以很容易地执行更复杂的副作用。
冒险结束
Recoil 构建于 React 的 Context API 之上，并提供了一种比 Context API 更强大、更灵活的应用程序状态管理方式。它允许您定义原子（atoms）和选择器（selector）来表示应用程序的状态。组件可以订阅这些原子和选择器，以便在它们的值发生变化时收到通知。与其他 React 状态管理库相比，Recoil 具有诸多优势，例如简化的状态管理、无需样板代码、更高的性能、更易于理解的语法以及更强的灵活性和可扩展性。如果您正在为您的 React 项目寻找状态管理库，Recoil 绝对值得考虑。
各位武士同胞，让我们学习反冲之术，掌握治国之道。
动机
🍀支持
请考虑关注并订阅我们的频道以示支持。您的支持对我们至关重要，它将帮助我们继续创作更多精彩内容。提前感谢您的支持！
