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