React中完整實例講解Recoil狀態(tài)管理庫的使用
Recoil狀態(tài)管理庫
先讓我吐槽一下，Recoil這個玩意文檔是真的不友好，另外發(fā)現(xiàn)國內(nèi)很少有人去用Recoil，然后好多文章都是照搬官網(wǎng)文檔，我特喵的要是出了問題直接看官方不就行了。如果你碰巧看到這個文章了，就細(xì)心看完吧，絕對的干貨。至于它的一些優(yōu)點特性，自己找找別的對比文章吧，我這里僅僅進(jìn)行一個簡單的示例演示及學(xué)習(xí)。
第一步：創(chuàng)建項目
利用vite創(chuàng)建一個React項目，其他的一樣，別問我為啥只講vite，因為我就是用的vite。
pnpm create vite
……選擇react項目至于是ts還是js看你自己的喜好……
npm install
npm run dev
這是我的項目目錄：
第二步：Recoil安裝
pnpm add recoil
項目使用
在main.tsx中插入<RecoilRoot />,注意這個標(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)建（會導(dǎo)致 antd 菜單折疊時閃爍，等待官方修復(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)建了一個目錄，并進(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>
);
}重點！?。。横槍ζ涮匦晕液唵谓o大家講一下如何正確理解并使用它的一些屬性及hook，僅僅限于其常用的，不常用的大家自行研究或者給我留私信。
Atom(options)
包含我們應(yīng)用中狀態(tài)的來源。最細(xì)粒子，直接定義我們使用的狀態(tài)，因為后續(xù)的selector也是基于此進(jìn)行的操作。
export const demoState = atom({
key: 'demoState',
default: ”demo”,
});
export const atomState = atom({
key: 'atomState',
default: {i18n: “en”},
});Selector(options)
代表一個派生狀態(tài)，你可以將派生狀態(tài)視為將狀態(tài)傳遞給以某種方式修改給定狀態(tài)的純函數(shù)的輸出。說白了，這個就是可以處理一下復(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)
這個就是直接讀取其內(nèi)部的值，僅此而以。
const demoState = useRecoilValue(demoState);
useSetRecoilState(state)
這個也是僅僅修改值，僅此而以。
const setDemoState = useSetRecoilState(demoState);
記住，你定義的什么就寫入什么，不要定義一個object寫入一個string或者其他的奇奇怪怪的東西，這樣肯定不會報錯，但是你用的時候肯定會肝火旺盛。
其他的hook大家自己研究玩吧。大家感興趣的話，直接去看下面的完整項目吧。
到此這篇關(guān)于React中完整實例講解Recoil狀態(tài)管理庫的使用的文章就介紹到這了,更多相關(guān)React Recoil內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了React-Native 組件之 Modal的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了詳解antd+react項目遷移vite的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了React 父子組件通信的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
ReactNative錯誤采集原理在Android中實現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative錯誤采集原理在Android中實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定，節(jié)后實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了React 中 setState使用小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
antd中form表單的wrapperCol和labelCol問題詳解
最近學(xué)習(xí)中遇到了些問題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
mobx是一個輕量級的狀態(tài)管理器,所以很簡單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法,本文通過示例代碼介紹react mobx 基本用法,感興趣的朋友有一起看看2023-11-11