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 Router提供了幾種不同的跳轉(zhuǎn)方式,包括使用組件進行頁面跳轉(zhuǎn)、使用組件進行重定向,以及使用編程式導航進行跳轉(zhuǎn),這篇文章主要介紹了React中的頁面跳轉(zhuǎn)方式詳解,需要的朋友可以參考下2023-09-09
React報錯信息之Expected?an?assignment?or?function?call?and?
這篇文章主要介紹了React報錯之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個示例來展示錯誤是如何產(chǎn)生的，需要的朋友可以參考下2022-08-08
React由Facebook來更新和維護，它是大量優(yōu)秀程序員的思想結(jié)晶，React的流行不僅僅局限于普通開發(fā)工程師對它的認可，大量流行的其他框架借鑒React的思想，接下來通過本文介紹React基礎(chǔ)及React開發(fā)依賴介紹,需要的朋友可以參考下2022-10-10
react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來
這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
react?card?slider實現(xiàn)滑動卡片教程示例
這篇文章主要為大家介紹了react?card?slider實現(xiàn)滑動卡片教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了React中多語言的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React特征學習Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學習Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
React-Native之定時器Timer的實現(xiàn)代碼
本篇文章主要介紹了React-Native之定時器Timer的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
在 React 開發(fā)中,Hooks 提供了一種強大的方式來管理組件的狀態(tài)和生命周期,然而,不恰當?shù)?nbsp;Hooks 使用可能會導致組件行為異常、性能問題或難以調(diào)試的錯誤,本文將探討 React 中常見的不適當 Hooks 使用問題,并提供解決方案,需要的朋友可以參考下2025-03-03
React的useEffect Hook它允許我們在函數(shù)組件中執(zhí)行副作用操作,但在使用過程中可能會遇到一些常見的錯誤,本文就來介紹一下常見問題及解決,感興趣的可以了解一下2023-10-10