React 你还在用 Redux 吗?更简化的状态管理工具(Recoil)

以往传统的 Redux 状态管理工具使用起来代码太过于复杂。


你需要通过纯函数触发 action 再去修改 data 中定义的数据,而且要通过接口请求数据还需要借助 redux - think 这个中间件才能完成。。。

更加方便使用的工具:Recoil ~   由 facebook 推出契合 React 的状态管理

它的定义方式和 useState 这个 HOOK 非常像,你可以更加简化的完成你的全局数据共享

pnpm install recoil        yarn install recoil       npm install recoil

安装好这个工具之后直接开始使用,需要引入之后包裹你的根组件 

import React from 'react';// 引入 Recoil 在 main.tsx 中包裹住你的根组件
import {RecoilRoot,atom,selector,useRecoilState,useRecoilValue,
} from 'recoil';function App() {return (// 此处包裹<RecoilRoot><CharacterCounter /></RecoilRoot>);
}

这一步做好之后,你可以在 src 文件之下定义 store(仓库)文件夹,名字随便起,按照自己喜欢的来(前提取的名字不要太骚被你的领导叫去喝茶)

它有两种定义数据的方式:

1. atom

2. selector

(在你创建好的文件夹下面创建 .js || .ts文件,比如我需要一个固定的管理员枚举,不会被修改) 

1)第一种 atom 的形式

default 中可以写任何数据结构,数组 对象 字符串 数字等等等等

你要使用怎么办?

  

import { adminEnum } from '@/store/adminEnumObject'

 直接在组件里面引入它,'@/store/adminEnumObject' 就是我创建好的管理员枚举文件

import { useRecoilValue } from 'recoil'

同时引入 recoil 身上的 useRecoilValue 方法,可以获取你定义的 atom || selector 中的指定数据 (是不是跟 HOOK 的写法非常像) 

const adminUser = useRecoilValue(adminEnum)

接着用  useRecoilValue 方法包裹你引入的文件,将它赋值给一个变量,你通过这个变量就可以访问到他身上的所有属性了。

注意:atom 定义的数据在刷新页面会自动丢失,除非将数据写成死的,一般用于固定的枚举。

2)第二种 selector 的形式

这种定义方式就较为🐂🍺了,因为它内部采用发布订阅的模式

(这种形式定义的数据也会在刷新的同时全部丢失,是可以避免的。请继续往下看)

 它带有一个 get 属性,你可以在它内部调用接口,return 出来的数据就会赋值给你这个变量

它只是一个定义的数据啊,那接口我不还得自己调用吗?

如果说你在当前页面的组件里面使用到了这个数据,他就会自动调用 get 中的接口,完成数据返回

 我这里使用到了 dictValuesSelector 并且这个页面已经渲染到浏览器了,它就会自动开始调用接口。

上面说的刷新会丢失数据的问题,你只要在当前页面用到了 Recoil 定义的 selector 它就会自动重新请求,永远不会出现数据突然丢失的问题!

并且你也可以给返回的数据写上 TS 的类型!!这样你的其他前端小伙伴在使用的时候可以更加快速的找到需要的字段信息。

时小记,终有成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习可解释性】5.SHAP值的高级使用

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP值的高级使用 正文 汇总SHAP值以获得更详细的模型解释 总体回顾 我们从学习排列重要性和部分依赖图开始&#xff0c;以显示学习后的模型的内容。 然后我们学习了SHAP值来分解单个预测的组成部…

CSS3背景样式

在CSS 2.1中&#xff0c;background属性的功能还无法满足设计的需求&#xff0c;为了方便设计师更灵活地设计需要的网页效果&#xff0c;CSS3在原有background基础上新增了一些功能属性&#xff0c;可以在同一个对象内叠加多个背景图像&#xff0c;可以改变背景图像的大小尺寸&…

[ubuntu系统下的文本编辑器nano,vim,gedit,文件使用,以及版本更新问题]

文本编辑器概要 在Ubuntu系统下&#xff0c;有许多文本编辑器可供选择&#xff0c;每个编辑器都有其独特的特性和用途。以下是一些常见的文本编辑器&#xff1a; Gedit&#xff1a; 这是Ubuntu默认的文本编辑器&#xff0c;它简单易用&#xff0c;适合基本的文本编辑任务。 安…

前端基础---跳转相关的功能

后端给链接地址并且给token进行跳转 如果点击有key4&#xff0c;说明要跳转到相应的页面 auth是通过后端获取的地址&#xff0c; jdk是后端获取的相应的token&#xff0c; 然后进行拼接&#xff0c;进行window.open&#xff08;&#xff09;进行跳转 if (key 4) {var testUrl …

基于RFID技术的优化医药供应链管理解决方案

一、社会背景和挑战 随着全球假药问题的严重性日益凸显&#xff0c;医疗产品的追溯和管理变得越来越重要。据世界卫生组织报告&#xff0c;全球假药比例已超过10%&#xff0c;而中国每年至少有20万人死于假药和不当用药。在国际上&#xff0c;医疗产品的追溯体系已成为监管机构…

MLF - 麻辣粉

MLF全称中期借贷便利&#xff08;Medium-term lending Facility&#xff09;,理解为央行向商业银行、政策银行发放的贷款&#xff0c;但需要符合一定要求才可向央行申请。银行通过MLF向央行借款的时候&#xff0c;需要提供担保品。一般为国债、央行票据、政策性金融债、地方债、…

数据库的用户管理

一、创建用户&#xff1a;create user 二、赋予用户权限&#xff1a;grant&#xff08;终端执行&#xff09; 三、删除用户权限&#xff1a;revoke&#xff08;在终端操作&#xff09; 四、用户的重命名&#xff1a;rename 五、删除用户&#xff1a;drop 六、修改用户密码 1、…

linux目录与文件管理

目录与路径 关于执行文件路径的变量&#xff1a;$PATH ls完整文件名为&#xff1a;/bin/ls 在任何文件夹下输入ls命令可以显示出一些信息而不是找不到命令&#xff0c;这就是因为环境变量PATH所致。在执行命令时&#xff0c;系统会依照PATH的设置去每个PATH定义的目录下查找文…

前端环境的安装 Node npm yarn

一 node npm 1.下载NodeJS安装包 下载地址&#xff1a;Download | Node.js 2.开始安装 打开安装包后&#xff0c;一直Next即可。当然&#xff0c;建议还是修改一下安装位置&#xff0c;NodeJS默认安装位置为 C:\Program Files 3.验证是否安装成功 打开DOS命令界面&#…

MINIO 对象存储服务

MINIO 官网下载地址&#xff1a; 注&#xff1a;需要下载 MINIO SERVER&#xff08;服务端&#xff09; 和 MINIO CLIENT&#xff08;客户端&#xff09;两个文件 WINDOWS版本下载地址&#xff1a;https://min.io/download#/windows LINUX版本下载地址&#xff1a;https://mi…

Python web自动化测试 —— 文件上传

​文件上传三种方式&#xff1a; &#xff08;一&#xff09;查看元素标签&#xff0c;如果是input&#xff0c;则可以参照文本框输入的形式进行文件上传 方法&#xff1a;和用户输入是一样的&#xff0c;使用send_keys 步骤&#xff1a;1、找到定位元素&#xff0c;2&#…

【大数据基础平台】星环TDH社区开发版单机部署

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#…

Vue之CSS基础

CSS&#xff1a;层叠样式表 1、选择器 从模板template中选择某元素进行样式设置 需要注意的是作用域到底是当前模板还是整个html文档 1.1 基础(单一)选择器 标签、类、 id、通配符 标签、直接使用标签名&#xff0c;比如div,span… 优点&#xff1a;全选 模板中的名{。。。}…

反射率检测仪如何检测后视镜

后视镜反射率检测是评估后视镜质量的重要步骤&#xff0c;可以反映后视镜的反射效果是否满足设计要求。一般来说&#xff0c;后视镜的反射率越高&#xff0c;驾驶员观察车后的道路状况就越清晰&#xff0c;从而能够更好地判断与后方车辆的距离和速度差。 后视镜反射率检测的原理…

你被骗了吗?别拿低价诱骗机器视觉小白,4000元机器视觉系统怎么来的?机器视觉工程师自己组装一个2000元不到,还带深度学习

淘宝闲鱼&#xff0c;大家搜搜铺价格&#xff0c;特别是机器视觉小白。 机架&#xff1a;&#xff08;新的&#xff09;200元以下。(看需求&#xff0c;自己简单打光&#xff0c;买个50元的。如果复杂&#xff0c;就拿给供应商免费打光) 相机&#xff0c;镜头&#xff1a;&am…

Spring MVC的常用注解(设置响应篇)

目录 1.返回静态页面 2.返回数据 3.返回HTML代码片段 4.返回json 5.设置状态码 6.设置Header &#xff08;1&#xff09;.设置 Content-Type &#xff08;2&#xff09;.设置其他Header 推荐先看前篇博客Spring MVC的常用注解&#xff08;接收请求数据篇&#xff09; 接收…

【数据结构】时间复杂度与空间复杂度

算法在编写成可执行程序后&#xff0c;运行时需要耗费时间资源和空间(内存)资源 。因此衡量一个算法的好坏&#xff0c;一般是从时间和空间两个维度来衡量的&#xff0c;即时间复杂度和空间复杂度。 时间复杂度&#xff1a; 主要衡量一个算法的运行快慢 空间复杂度&#xff1a;…

C#学习相关系列之多线程---ConfigureAwait的用法

一、ConfigureAwait的作用 ConfigureAwait方法是Task类中的一个实例方法&#xff0c;它用于配置任务的运行上下文。运行上下文指的是任务在执行期间所处的环境&#xff0c;包括线程、同步上下文等。ConfigureAwait方法接受一个布尔值参数&#xff0c;用于决定是否捕获上下文。当…

【JAVA学习笔记】53 - 集合-List类及其子类Collection、ArrayList、LinkedList类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter14/src/com/yinhai/collection_ https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter14/src/com/yinhai/list_ 集合 一、集合引入 前面我们保存多个数据使用的是数组…

Elasticsearch下载安装,IK分词器、Kibana下载安装使用,elasticsearch使用演示

首先给出自己使用版本的网盘链接&#xff1a;自己的版本7.17.14 链接&#xff1a;https://pan.baidu.com/s/1FSlI9jNf1KRP-OmZlCkEZw 提取码&#xff1a;1234 一般情况下 Elastic Search&#xff08;ES&#xff09; 并不单独使用&#xff0c;例如主流的技术组合 ELK&#xff08…