以往傳統(tǒng)的 Redux 狀態(tài)管理工具使用起來代碼太過于復(fù)雜。
你需要通過純函數(shù)觸發(fā) action 再去修改 data 中定義的數(shù)據(jù)，而且要通過接口請求數(shù)據(jù)還需要借助 redux - think 這個(gè)中間件才能完成。。。
更加方便使用的工具：Recoil ~? ?由 facebook 推出契合 React 的狀態(tài)管理
它的定義方式和 useState 這個(gè) HOOK 非常像，你可以更加簡化的完成你的全局?jǐn)?shù)據(jù)共享
pnpm install recoil? ? ? ? yarn install recoil? ? ? ?npm install recoil
安裝好這個(gè)工具之后直接開始使用，需要引入之后包裹你的根組件?
import React from 'react';
// 引入 Recoil 在 main.tsx 中包裹住你的根組件
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from 'recoil';
function App() {
return (
// 此處包裹
<RecoilRoot>
<CharacterCounter />
</RecoilRoot>
);
}這一步做好之后，你可以在 src 文件之下定義 store（倉庫）文件夾，名字隨便起，按照自己喜歡的來（前提取的名字不要太騷被你的領(lǐng)導(dǎo)叫去喝茶）
它有兩種定義數(shù)據(jù)的方式：
1. atom
2. selector
（在你創(chuàng)建好的文件夾下面創(chuàng)建 .js || .ts文件，比如我需要一個(gè)固定的管理員枚舉，不會被修改）?
1）第一種 atom 的形式
default 中可以寫任何數(shù)據(jù)結(jié)構(gòu)，數(shù)組 對象 字符串 數(shù)字等等等等
你要使用怎么辦？
??
import { adminEnum } from '@/store/adminEnumObject'
?直接在組件里面引入它，'@/store/adminEnumObject' 就是我創(chuàng)建好的管理員枚舉文件
import { useRecoilValue } from 'recoil'
同時(shí)引入 recoil 身上的 useRecoilValue 方法，可以獲取你定義的 atom || selector 中的指定數(shù)據(jù)?（是不是跟 HOOK 的寫法非常像）?
const adminUser = useRecoilValue(adminEnum)
接著用??useRecoilValue 方法包裹你引入的文件，將它賦值給一個(gè)變量，你通過這個(gè)變量就可以訪問到他身上的所有屬性了。
注意：atom 定義的數(shù)據(jù)在刷新頁面會自動丟失，除非將數(shù)據(jù)寫成死的，一般用于固定的枚舉。
2）第二種 selector 的形式
這種定義方式就較為????了，因?yàn)樗鼉?nèi)部采用發(fā)布訂閱的模式
（這種形式定義的數(shù)據(jù)也會在刷新的同時(shí)全部丟失，是可以避免的。請繼續(xù)往下看）
?它帶有一個(gè) get 屬性，你可以在它內(nèi)部調(diào)用接口，return 出來的數(shù)據(jù)就會賦值給你這個(gè)變量
它只是一個(gè)定義的數(shù)據(jù)啊，那接口我不還得自己調(diào)用嗎？
如果說你在當(dāng)前頁面的組件里面使用到了這個(gè)數(shù)據(jù)，他就會自動調(diào)用 get 中的接口，完成數(shù)據(jù)返回
?我這里使用到了 dictValuesSelector 并且這個(gè)頁面已經(jīng)渲染到瀏覽器了，它就會自動開始調(diào)用接口。
上面說的刷新會丟失數(shù)據(jù)的問題，你只要在當(dāng)前頁面用到了 Recoil 定義的 selector 它就會自動重新請求，永遠(yuǎn)不會出現(xiàn)數(shù)據(jù)突然丟失的問題！
并且你也可以給返回的數(shù)據(jù)寫上 TS 的類型?。∵@樣你的其他前端小伙伴在使用的時(shí)候可以更加快速的找到需要的字段信息。
文章來源：http://www.zghlxwxcb.cn/news/detail-736414.html
時(shí)小記，終有成。文章來源地址http://www.zghlxwxcb.cn/news/detail-736414.html
到了這里，關(guān)于React 你還在用 Redux 嗎？更簡化的狀態(tài)管理工具（Recoil）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
