React中完整实例讲解Recoil状态管理库的使用

舌吻

Recoil状态管理库

先让我吐槽一下，Recoil这个玩意文档是真的不友好，另外发现国内很少有人去用Recoil，然后好多文章都是照搬官网文档，我特喵的要是出了问题直接看官方不就行了。如果你碰巧看到这个文章了，就细心看完吧，绝对的干货。至于它的一些优点特性，自己找找别的对比文章吧，我这里仅仅进行一个简单的示例演示及学习。
第一步：创建项目
利用vite创建一个React项目，其他的一样，别问我为啥只讲vite，因为我就是用的vite。

1. pnpm create vite……选择react项目至于是ts还是js看你自己的喜好……npm installnpm run dev

复制代码

这是我的项目目录：

第二步：Recoil安装

1. pnpm add recoil

复制代码

项目使用
在main.tsx中插入<RecoilRoot />,注意这个标签必须是UI的根。

1. import ReactDOM from "react-dom/client";
   
2. import { BrowserRouter } from "react-router-dom";
   
3. import { RecoilRoot } from "recoil";
   
4. import App from "./App";
   
5. import "antd/dist/reset.css";
   
6. import "animate.css";
   
7. import "@/assets/styles/index.scss";
   
8. // react 18 创建（会导致 antd 菜单折叠时闪烁，等待官方修复）
   
9. ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   
10.   // * react严格模式
    
11.   // <React.StrictMode>
    
12.   <BrowserRouter>
    
13.    <RecoilRoot>
    
14.     <App></App>
    
15.    </RecoilRoot>
    
16.   </BrowserRouter>,
    
17.   // </React.StrictMode>,
    
18. );

复制代码

为了使用方便，我将其按照大众化水准创建了一个目录，并进行了一些简单的封装。好不好用大家自行使用，不好用自己改好用。

1. // 示例封装
   
2. import { atom, selector } from "recoil";
   
3. import ThemeConfig from "@/config/themeConfig";
   
4. import { ITheme } from "@/interface/theme";
   
5. const theme: ITheme = {
   
6.   title: import.meta.env.VITE_TITLE,
   
7.   theme: "default",
   
8.   i18n: ThemeConfig.i18nDef,
   
9. };
   
10. export const themeState = atom({
    
11.   key: "themeState",
    
12.   default: theme,
    
13. });
    
14. export default {
    
15.   i18nState: atom({
    
16.    key: "i18nState",
    
17.    default: ThemeConfig.i18nDef,
    
18.   }),
    
19.   useThemeState: selector({
    
20.    key: "useThemeState",
    
21.    get: ({ get }) => {
    
22.     return get(themeState);
    
23.    },
    
24.    set: ({ get, set }, newValue) => {
    
25.     const oldValue = get(themeState);
    
26.     const updateValue = Object.assign({}, oldValue, newValue);
    
27.     set(themeState, updateValue);
    
28.    },
    
29.   }),
    
30. };

复制代码

1. // index.ts入口
   
2. import Theme from "./modules/theme";
   
3. export default {
   
4.   …Theme,
   
5. };

复制代码

使用示例

1. import { useEffect } from "react";
   
2. import { Row, Col, Pagination, Switch } from "antd";
   
3. import { atom, useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
   
4. import Store from "@/store";
   
5. import "@/assets/styles/page/home.scss";
   
6. export default function Home() {
   
7.   const [i18nState, setI18nState] = useRecoilState(Store.i18nState);
   
8.   const setThemeState = useSetRecoilState(Store.useThemeState);
   
9.   const themeState = useRecoilValue(Store.useThemeState);
   
10.   useEffect(() => {
    
11.    setI18nState("en-us");
    
12.    console.log(i18nState);
    
13.   }, []);
    
14.   const onChange = (checked: boolean) => {
    
15.    console.log(`switch to ${checked}`);
    
16.    setThemeState({ i18n: "en-us" });
    
17.    if (checked) {
    
18.     setThemeState({ i18n: "zh-cn" });
    
19.    } else {
    
20.     setThemeState({ i18n: "en-us" });
    
21.    }
    
22.    console.log(themeState);
    
23.   };
    
24.   return (
    
25.    <Row justify="center" className="content-body home-box">
    
26.     <Col span={24}>
    
27.      <Pagination total={85} showSizeChanger showQuickJumper showTotal={(total) => `Total ${total} items`}></Pagination>
    
28.      <Switch defaultChecked onChange={onChange} />
    
29.     </Col>
    
30.    </Row>
    
31.   );
    
32. }

复制代码

重点！！！：针对其特性我简单给大家讲一下如何正确理解并使用它的一些属性及hook，仅仅限于其常用的，不常用的大家自行研究或者给我留私信。

Atom(options)

包含我们应用中状态的来源。最细粒子，直接定义我们使用的状态，因为后续的selector也是基于此进行的操作。

1. export const demoState = atom({
   
2.   key: 'demoState',
   
3.   default: ”demo”,
   
4. });
   
5. export const atomState = atom({
   
6.   key: 'atomState',
   
7.   default: {i18n: “en”},
   
8. });

复制代码

Selector(options)

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

1. export const useAtomState = selector({
   
2.   key: 'useAtomState',
   
3.   get: ({ get }) => {return get(atomState)},
   
4.   set: ({ get, set }, newValue) => {set(atomState, newValue)},
   
5. });

复制代码

useRecoilState(state)
利用此hook可以进行读写操作，和react中的useState可以说是一模一样的用法，你怎么理解useState就怎么理解useRecoilState就行。

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

复制代码

useRecoilValue(state)
这个就是直接读取其内部的值，仅此而以。

1. const demoState = useRecoilValue(demoState);

复制代码

useSetRecoilState(state)
这个也是仅仅修改值，仅此而以。

1. const setDemoState = useSetRecoilState(demoState);

复制代码

记住，你定义的什么就写入什么，不要定义一个object写入一个string或者其他的奇奇怪怪的东西，这样肯定不会报错，但是你用的时候肯定会肝火旺盛。
其他的hook大家自己研究玩吧。大家感兴趣的话，直接去看下面的完整项目吧。
项目地址
到此这篇关于React中完整实例讲解Recoil状态管理库的使用的文章就介绍到这了,更多相关React Recoil内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/284467w3l.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！