ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

反冲简介

2022-09-07 00:33:10  阅读:186  来源: 互联网

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


反冲简介

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

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

后坐力有

  1. 原子

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

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

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

2. 选择器

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

为什么反冲?

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

设置使用反冲创建 React App。

创建一个新项目

步骤在以下链接中。

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

⚙️ 安装依赖包。

  1. 安装反冲

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

  1. 创建一个原子来保存(图像,加载器)值和选择器来处理状态值。

    状态/images.js 从“反冲”导入{原子,选择器}; 导出 const imagesState = atom({
    键:“图像”,
    默认: [],
    }); 导出常量 loadingState = atom({
    键:“加载”,
    默认值:假,
    }); 导出 const lengthOfImages = 选择器({
    键:“图像计数”,
    得到:({得到})=> {
    const state = get(imagesState).length;
    返回状态;
    },
    });

  2. 像普通的 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();

应用程序输出

项目结构

GitHub — yogeshwaran-ramesh/react-recoil-app

参考:

了解 React 中的 Recoil

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/20662/07510700

标签:简介,应用程序,原子,导入,反冲,组件,选择器
来源: https://www.cnblogs.com/amboke/p/16663825.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有