React中完整實(shí)例講解Recoil狀態(tài)管理庫的使用
Recoil狀態(tài)管理庫
先讓我吐槽一下，Recoil這個(gè)玩意文檔是真的不友好，另外發(fā)現(xiàn)國內(nèi)很少有人去用Recoil，然后好多文章都是照搬官網(wǎng)文檔，我特喵的要是出了問題直接看官方不就行了。如果你碰巧看到這個(gè)文章了，就細(xì)心看完吧，絕對(duì)的干貨。至于它的一些優(yōu)點(diǎn)特性，自己找找別的對(duì)比文章吧，我這里僅僅進(jìn)行一個(gè)簡單的示例演示及學(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)行了一些簡單的封裝。好不好用大家自行使用，不好用自己改好用。
// 示例封裝
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ì)其特性我簡單給大家講一下如何正確理解并使用它的一些屬性及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)管理庫的使用的文章就介紹到這了,更多相關(guān)React Recoil內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談React深度編程之受控組件與非受控組件,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了Vite搭建React項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
useEffect是React中的一個(gè)鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對(duì)大家有所幫助2023-08-08
React實(shí)現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個(gè)流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
React中的Portal允許開發(fā)者將組件渲染到DOM樹的不同位置,本文主要介紹了React中Portal的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
使用Ant Design Anchor組件的一個(gè)坑及解決
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
react+antd.3x實(shí)現(xiàn)ip輸入框
這篇文章主要為大家詳細(xì)介紹了react+antd.3x實(shí)現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題
這篇文章主要介紹了React移動(dòng)端項(xiàng)目之pdf預(yù)覽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02