react如何使用mobx6动态加载数据
更新时间：2024年02月28日 11:44:29 作者：蒟蒻的工具人
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动态加载数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React Router提供了几种不同的跳转方式,包括使用组件进行页面跳转、使用组件进行重定向,以及使用编程式导航进行跳转,这篇文章主要介绍了React中的页面跳转方式详解,需要的朋友可以参考下2023-09-09
React报错信息之Expected an assignment or function call and
这篇文章主要介绍了React报错之Expected an assignment or function call and instead saw an expression,下面有两个示例来展示错误是如何产生的，需要的朋友可以参考下2022-08-08
React由Facebook来更新和维护，它是大量优秀程序员的思想结晶，React的流行不仅仅局限于普通开发工程师对它的认可，大量流行的其他框架借鉴React的思想，接下来通过本文介绍React基础及React开发依赖介绍,需要的朋友可以参考下2022-10-10
react redux中如何获取store数据并将数据渲染出来
这篇文章主要介绍了react redux中如何获取store数据并将数据渲染出来，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了react card slider实现滑动卡片教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React中多语言的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家介绍了React特征学习Form数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
在 React 开发中,Hooks 提供了一种强大的方式来管理组件的状态和生命周期,然而,不恰当的 Hooks 使用可能会导致组件行为异常、性能问题或难以调试的错误,本文将探讨 React 中常见的不适当 Hooks 使用问题,并提供解决方案,需要的朋友可以参考下2025-03-03
React的useEffect Hook它允许我们在函数组件中执行副作用操作,但在使用过程中可能会遇到一些常见的错误,本文就来介绍一下常见问题及解决,感兴趣的可以了解一下2023-10-10
最新评论