小工具      在线工具  汉语词典  css  js  c++  java

Recoil在React中的完整实践计划

Web前端,React,react.js,前端,vue.js 额外说明

收录于:38天前

我先抱怨一下吧。 Recoil的文档确实不友好。另外我发现国内用Recoil的人很少,很多文章都是抄袭官网文档。如果有问题,直接去官方网站查看即可。如果您碰巧看到这篇文章,请仔细阅读,这绝对是有用的信息。至于它的一些优点和特点,大家可以自己去找其他的对比文章。这里我只通过一个简单的例子来演示和学习。

第 1 步:创建项目

使用维特创造反应项目,其他都一样,别问我为什么只讲维特,因为这就是我用的维特

pnpm create vite

……选择react项目至于是ts还是js看你自己的喜好……

npm install

npm run dev

这是我的项目目录:

第二步:畏缩安装

pnpm add recoil

项目使用

插入 main.tsx<RecoilRoot/>,请注意,此标签必须是 UI 的根。

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
import "antd/dist/reset.css";
import "animate.css";
import "@/assets/styles/index.scss";

// react 18 创建(会导致 antd 菜单折叠时闪烁,等待官方修复)
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // * react严格模式
  // <React.StrictMode>
  <BrowserRouter>
   <RecoilRoot>
    <App></App>
   </RecoilRoot>
  </BrowserRouter>,
  // </React.StrictMode>,
);

为了方便使用,我根据流行的标准创建了一个目录,并做了一些简单的封装。好不好用就看你自己了;如果不好,你可以自己改变。

// 示例封装
import { atom, selector } from "recoil";
import ThemeConfig from "@/config/themeConfig";
import { ITheme } from "@/interface/theme";

const theme: ITheme = {
  title: import.meta.env.VITE_TITLE,
  theme: "default",
  i18n: ThemeConfig.i18nDef,
};

export const themeState = atom({
  key: "themeState",
  default: theme,
});

export default {
  i18nState: atom({
   key: "i18nState",
   default: ThemeConfig.i18nDef,
  }),
  useThemeState: selector({
   key: "useThemeState",
   get: ({ get }) => {
    return get(themeState);
   },
   set: ({ get, set }, newValue) => {
    const oldValue = get(themeState);
    const updateValue = Object.assign({}, oldValue, newValue);
    set(themeState, updateValue);
   },
  }),
};
// index.ts入口
import Theme from "./modules/theme";

export default {
  …Theme,
};

使用示例

import { useEffect } from "react";
import { Row, Col, Pagination, Switch } from "antd";
import { atom, useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
import Store from "@/store";
import "@/assets/styles/page/home.scss";

export default function Home() {
  const [i18nState, setI18nState] = useRecoilState(Store.i18nState);
  const setThemeState = useSetRecoilState(Store.useThemeState);
  const themeState = useRecoilValue(Store.useThemeState);
  useEffect(() => {
   setI18nState("en-us");
   console.log(i18nState);
  }, []);

  const onChange = (checked: boolean) => {
   console.log(`switch to ${checked}`);
   setThemeState({ i18n: "en-us" });
   if (checked) {
    setThemeState({ i18n: "zh-cn" });
   } else {
    setThemeState({ i18n: "en-us" });
   }
   console.log(themeState);
  };

  return (
   <Row justify="center" className="content-body home-box">
    <Col span={24}>
     <Pagination total={85} showSizeChanger showQuickJumper showTotal={(total) => `Total ${total} items`}></Pagination>
     <Switch defaultChecked onChange={onChange} />
    </Col>
   </Row>
  );
}

重点! ! ! :根据它的特点,简单介绍一下如何正确理解和使用它的一些属性和钩子。仅限于常用的。如果不常用的话可以自己研究或者私信我。

原子(选项)

包含我们应用程序中的状态源。最细的粒子直接定义了我们使用的状态,因为后续的选择器也是基于此进行操作的。

export const demoState = atom({
  key: 'demoState',
  default: ”demo”,
});
export const atomState = atom({
  key: 'atomState',
  default: {i18n: “en”},
});

选择器(选项)

代表一个派生状态,您可以将派生状态视为将状态传递给以某种方式修改给定状态的纯函数的输出。说白了,这是为了处理复杂的状态,或者说处理你需要的状态。

export const useAtomState = selector({
  key: 'useAtomState',
  get: ({ get }) => {return get(atomState)},
  set: ({ get, set }, newValue) => {set(atomState, newValue)},
});

useRecoilState(状态)

可以使用这个hook来进行读写操作,可以说和react中的useState一模一样。只要理解 useRecoilState 如何理解 useState 就可以了。

const [demoState, setDemoState] = useRecoilState(demoState);

useRecoilValue(状态)

这是直接读取其内部值,仅此而已。

const demoState = useRecoilValue(demoState);

useSetRecoilState(状态)

这也只是修改了值,仅此而已。

const setDemoState = useSetRecoilState(demoState);

请记住,写下您定义的任何内容。不要定义一个对象并将其写入字符串或其他奇怪的东西。这样你肯定不会报错,但是使用的时候肯定会生气。

其他的钩子你可以自己研究和玩。如果有兴趣,请直接看我写的完整项目。

项目地址

. . .

相关推荐

额外说明

npm 安装 Weex 工具包

npm i -g weex-toolkit weex -v // 查看当前weex工具版本

额外说明

SpringBoot实用教程(一)|集成Swagger3.0.0

本文教你如何在SpringBoot中整合Swagger,快速实现在线接口文档。 Swagger版本:3.0.0 SpringBoot版本:2.5.6 目录 一、初始化SpringBoot项目  二、引入依赖pom 三、SwaggerConfig配置类 四

额外说明

【解决】MySQL添加中文数据? Mac 版编号

问题: 一,数据表的编码为utf8 代码:ALTER TABLE customer CONVERT TO CHARACTER SET utf8 二,连接数据库的连接代码 url=jdbc:mysql://localhost:3306/ssh?charac

额外说明

【自学,后续整理成文】Prometheus教程

背景 云原生背景下,必须学会使用普罗米修斯监控容器。 虽然zabbix也能监控容器,但实际使用中当容器运行时使用containerd时,zabbix存在一定限制。 普罗米修斯和K8S一样是CNCF基金所管理的项目,二者匹配性绝佳。 先分点记录学习过程,达

额外说明

typora+picgo+gitee,轻松搞定图片上传

目录 Gitee设置 PicGo配置 typora设置 常见问题 版本需求 PicGo 软件的版本要求 2.2.0 及以上 Typora 软件的版本要求 0.9.84 及以上 步骤 Gitee设置 新建仓库 登录gitee 点击右上角的+,新建仓库 新建

额外说明

vue简单提交表单数据

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

额外说明

基于PLC控制的霓虹灯广告屏设计

博主主页:电子科技大神 博主简介:专注电子技术领域和毕业设计项目实战,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。 主要内容:毕业设计(单片机项目,plc,仿真等)、简历模板、学习资料、技术咨询。 文章目录 一、摘要 二、绪论 二、霓虹灯广告

额外说明

PAT乙级真题:C++:锤子剪刀布

题目描述 大家应该都会玩“锤子剪刀布”的游戏: 现给出两人的交锋记录,请统计双方的胜、平、负次数,并且给出双方分别出什么手势的胜算最大。 输入描述 输入第1行给出正整数N(<=105),即双方交锋的次数。随后N行,每行给出一次交锋的信息,即甲、乙双方同时

额外说明

【数据结构与算法】Vue3实现选择排序动画效果与原理拆解

系列文章目录 删除有序数组中的重复项 JavaScript实现选择排序 文章目录 系列文章目录 1、选择排序的原理 1.1、选择排序的基本步骤 1.2、拆解思路 2、动画演示原理 3、代码实现 4、优化后的选择排序 5、用Vue3实现选择排序的动画效果(

额外说明

强制用户在阅读WordPress中的帖子之前先登录

If your blog has some restricted area that you don’t want to publicize to all visitors, just for members only, then you might w

ads via 小工具