标签：简介应用程序原子导入反冲组件选择器

反冲简介

畏缩是 Facebook 的 React 实验状态管理系统。它提供了几种开箱即用的功能，这些功能仅靠 React ⚛️ 很难实现。

Recoil 可让您创建一个数据流图，该图流自原子通过 选择器。

后坐力有

原子

原子是状态的单位。它们是可更新和可订阅的：当一个原子被更新时，每个订阅的组件都会用新的值重新渲染。它们也可以在运行时创建。原子可以用来代替 React 本地组件状态。如果多个组件使用相同的原子，则所有这些组件共享它们的状态。

一个原子由两个字段组成。

钥匙 — 唯一键（相对于其他原子/选择器）
默认 — 默认值

2. 选择器

一个 选择器 是一个接受原子或其他选择器作为输入的纯函数。当这些上游原子或选择器更新时，将重新评估选择器功能。组件可以像原子一样订阅选择器，然后在选择器更改时重新渲染。

为什么反冲？

Recoil 就像 Redux 提供了一个 全局状态 .使用 Recoil，我们不必将状态作为 props 传递给子组件以便在组件之间共享它们（这个概念称为 支柱钻孔 ）。
一旦我们将一个组件连接到任何原子或者 选择器， 他们订阅了它，因此对该状态的任何更新都将在应用程序中反映到它被使用的任何地方。
有后坐力 选择器， 我们可以同步或异步转换状态，并在应用程序的任何地方使用派生状态。

设置使用反冲创建 React App。

创建一个新项目

步骤在以下链接中。

创建反应应用
创建 React Native 应用程序

⚙️ 安装依赖包。

安装反冲

npm 安装反冲
或者
纱线加反冲

创建一个原子来保存（图像，加载器）值和选择器来处理状态值。

状态/images.js 从“反冲”导入{原子，选择器}；导出 const imagesState = atom({
键：“图像”，
默认： []，
}); 导出常量 loadingState = atom({
键：“加载”，
默认值：假，
}); 导出 const lengthOfImages = 选择器（{
键：“图像计数”，
得到：（{得到}）=> {
const state = get(imagesState).length;
返回状态；
},
});
像普通的 useState 一样使用 useRecoilState。

应用程序.js 导入 { useRecoilState, useRecoilValue } from "recoil";
从“./state/images”导入 { loadingState, imagesState, lengthOfImages };
函数应用程序（）{
const [图像，setImages] = useRecoilState(imagesState);
const [加载，setLoading] = useRecoilState(loadingState);
常量 hasEven = useRecoilValue(lengthOfImages); const fetchImages = async () => {
设置加载（真）；
拿来（”https://picsum.photos/v2/list?page=1&limit=9 ")
.then((响应) => response.json())
.then((responseJson) => {
setImages(responseJson);
设置加载（假）；
})
.catch((e) => console.log(e));
}; 返回（

畏缩
获取图像 {加载 &&
加载...
}
获取 {hasEven} 图像
{images.map(({ download_url, id, author }) => ( ))}
); } 导出默认应用程序； index.js 从“反应”导入反应；从“react-dom”导入 ReactDOM；导入“./index.css”；从“./App”导入应用程序；从“./reportWebVitals”导入reportWebVitals；从“反冲”导入{ RecoilRoot }； ReactDOM.render( , document.getElementById("root") ); 报告WebVitals（）；