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