目錄

• Recoil狀態(tài)管理庫(kù)
• Atom(options)
• Selector(options)

Recoil狀態(tài)管理庫(kù)

先讓我吐槽一下，Recoil這個(gè)玩意文檔是真的不友好，另外發(fā)現(xiàn)國(guó)內(nèi)很少有人去用Recoil，然后好多文章都是照搬官網(wǎng)文檔，我特喵的要是出了問題直接看官方不就行了。如果你碰巧看到這個(gè)文章了，就細(xì)心看完吧，絕對(duì)的干貨。至于它的一些優(yōu)點(diǎn)特性，自己找找別的對(duì)比文章吧，我這里僅僅進(jìn)行一個(gè)簡(jiǎn)單的示例演示及學(xué)習(xí)。

第一步：創(chuàng)建項(xiàng)目

利用vite創(chuàng)建一個(gè)React項(xiàng)目，其他的一樣，別問我為啥只講vite，因?yàn)槲揖褪怯玫膙ite。

pnpm create vite
……選擇react項(xiàng)目至于是ts還是js看你自己的喜好……
npm install
npm run dev

這是我的項(xiàng)目目錄：

第二步：Recoil安裝

pnpm add recoil

項(xiàng)目使用

在main.tsx中插入<RecoilRoot />,注意這個(gè)標(biāo)簽必須是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 創(chuàng)建（會(huì)導(dǎo)致 antd 菜單折疊時(shí)閃爍，等待官方修復(fù)）ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(  // * react嚴(yán)格模式  // <React.StrictMode>  <BrowserRouter>   <RecoilRoot>    <App></App>   </RecoilRoot>  </BrowserRouter>,  // </React.StrictMode>,);

為了使用方便，我將其按照大眾化水準(zhǔn)創(chuàng)建了一個(gè)目錄，并進(jìn)行了一些簡(jiǎn)單的封裝。好不好用大家自行使用，不好用自己改好用。

// 示例封裝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>  );}

重點(diǎn)！！！：針對(duì)其特性我簡(jiǎn)單給大家講一下如何正確理解并使用它的一些屬性及hook，僅僅限于其常用的，不常用的大家自行研究或者給我留私信。

Atom(options)

包含我們應(yīng)用中狀態(tài)的來源。最細(xì)粒子，直接定義我們使用的狀態(tài)，因?yàn)楹罄m(xù)的selector也是基于此進(jìn)行的操作。

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

Selector(options)

代表一個(gè)派生狀態(tài)，你可以將派生狀態(tài)視為將狀態(tài)傳遞給以某種方式修改給定狀態(tài)的純函數(shù)的輸出。說白了，這個(gè)就是可以處理一下復(fù)雜的狀態(tài)，或者處理一下自己需要的狀態(tài)。

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

useRecoilState(state)

利用此hook可以進(jìn)行讀寫操作，和react中的useState可以說是一模一樣的用法，你怎么理解useState就怎么理解useRecoilState就行。

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

useRecoilValue(state)

這個(gè)就是直接讀取其內(nèi)部的值，僅此而以。

const demoState = useRecoilValue(demoState);

useSetRecoilState(state)

這個(gè)也是僅僅修改值，僅此而以。

const setDemoState = useSetRecoilState(demoState);

記住，你定義的什么就寫入什么，不要定義一個(gè)object寫入一個(gè)string或者其他的奇奇怪怪的東西，這樣肯定不會(huì)報(bào)錯(cuò)，但是你用的時(shí)候肯定會(huì)肝火旺盛。

其他的hook大家自己研究玩吧。大家感興趣的話，直接去看下面的完整項(xiàng)目吧。

到此這篇關(guān)于React中完整實(shí)例講解Recoil狀態(tài)管理庫(kù)的使用的文章就介紹到這了,更多相關(guān)React Recoil內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！