React中完整實(shí)例講解Recoil狀態(tài)管理庫(kù)的使用
Recoil狀態(tài)管理庫(kù)
先讓我吐槽一下，Recoil這個(gè)玩意文檔是真的不友好，另外發(fā)現(xiàn)國(guó)內(nèi)很少有人去用Recoil，然后好多文章都是照搬官網(wǎng)文檔，我特喵的要是出了問(wèn)題直接看官方不就行了。如果你碰巧看到這個(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)目，其他的一樣，別問(wèn)我為啥只講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)的來(lá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ù)的輸出。說(shuō)白了，這個(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可以說(shuō)是一模一樣的用法，你怎么理解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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了React-Native 組件之 Modal的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
詳解antd+react項(xiàng)目遷移vite的解決方案
這篇文章主要介紹了詳解antd+react項(xiàng)目遷移vite的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React+Ant Design開(kāi)發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開(kāi)發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了React 父子組件通信的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了react hooks實(shí)現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了React 中 setState使用小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
antd中form表單的wrapperCol和labelCol問(wèn)題詳解
最近學(xué)習(xí)中遇到了些問(wèn)題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
mobx是一個(gè)輕量級(jí)的狀態(tài)管理器,所以很簡(jiǎn)單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法,本文通過(guò)示例代碼介紹react mobx 基本用法,感興趣的朋友有一起看看2023-11-11