react如何使用mobx6动态加载数据
作者：蒟蒻的工具人
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
mobx是一个轻量级的状态管理器，所以很简单(单一全局数据使用class)类有get 数据方法。
使用
1.下载mobx库和mobx-react-lite库
2.创建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.非基础类型需要用toJs转换
在store.js定义
data={"id":1,"name","abc"}
在react中使用
toJs(store.data)
3.请求初始化数据在UseEffect中执行
useEffect(() => {
bookStore.getBorrowList();
}, []);到此这篇关于react使用mobx6动态加载数据的文章就介绍到这了,更多相关react动态加载数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！