react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù)
更新時(shí)間：2024年02月28日 11:44:29 作者：蒟蒻的工具人
MobX是一個(gè)強(qiáng)大而簡(jiǎn)單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應(yīng)用程序中的數(shù)據(jù)流,本文給大家介紹react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧
mobx是一個(gè)輕量級(jí)的狀態(tài)管理器，所以很簡(jiǎn)單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法。
使用
1.下載mobx庫(kù)和mobx-react-lite庫(kù)
2.創(chuàng)建store.js
import { observable, action,makeAutoObservable } from 'mobx';
class BookStore{
bookList=[];
count=0;
constructor(){
makeAutoObservable(this); //使變量自動(dòng)變成observerable變量
}
add=()=>{
this.count++;
}
addBook=(book)=>{
fetch('/book/add')
}
getBookList=()=>{
fetch('/book/list')
}
}
}
let bookStore=new BookStore();
export default bookStore3.在react組件中observer包裹
import { observer } from 'mobx-react-lite';
const BookList= observer(() => {
return()
})注意事項(xiàng)
1.mobx里的observer變量必須放在react render組件里才會(huì)刷新
{/* render的組件里必須有mobx store的值才會(huì)刷新 */}
return (
<Button onClick={()=>{
localUserStore.add()
}}>
{localUserStore.count}
</Button>
)
2.非基礎(chǔ)類型需要用toJs轉(zhuǎn)換
在store.js定義
data={"id":1,"name","abc"}
在react中使用
toJs(store.data)
3.請(qǐng)求初始化數(shù)據(jù)在UseEffect中執(zhí)行
useEffect(() => {
bookStore.getBorrowList();
}, []);到此這篇關(guān)于react使用mobx6動(dòng)態(tài)加載數(shù)據(jù)的文章就介紹到這了,更多相關(guān)react動(dòng)態(tài)加載數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了React自定義Hook-useForkRef的具體使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
React Native react-navigation 導(dǎo)航使用詳解
本篇文章主要介紹了React Native react-navigation 導(dǎo)航使用詳解，詳解的介紹了react-navigation導(dǎo)航的使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-12-12
React系列useSyncExternalStore學(xué)習(xí)詳解
這篇文章主要為大家介紹了React系列useSyncExternalStore的學(xué)習(xí)及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文我們將介紹 React中組件的類別，以及如何創(chuàng)建和使用組件。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
react-three-fiber實(shí)現(xiàn)炫酷3D粒子效果首頁(yè)
這篇文章主要介紹了react-three-fiber實(shí)現(xiàn)3D粒子效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
pubsub-js?是一個(gè)用于實(shí)現(xiàn)發(fā)布-訂閱模式的 JavaScript 庫(kù),可以用于不同組件之間的通信,在 React 中,可以使用?pubsub-js?來實(shí)現(xiàn)組件之間的通信,本篇文章給大家講解pubsub-js在react中的使用,感興趣的朋友一起看看吧2023-10-10
react-native滑動(dòng)吸頂效果的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于react-native滑動(dòng)吸頂效果的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用react-native具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了React如何動(dòng)態(tài)控制偽元素樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在 React 應(yīng)用程序中,數(shù)據(jù)傳遞是非常重要的,它允許我們?cè)诮M件之間共享信息和狀態(tài),從而構(gòu)建出復(fù)雜的用戶界面,本文將深入探討React數(shù)據(jù)傳遞的六種方式,需要的朋友可以參考下2025-08-08
淺談React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程
本文主要介紹了React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程，主要介紹了公共頁(yè)面、受保護(hù)頁(yè)面和登錄頁(yè)面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05