react使用mobx6动态加载数据

蒟蒻的工具人

已于 2023-06-25 17:32:28 修改

阅读量608

点赞数

文章标签： react.js javascript ecmascript

于 2023-06-24 13:55:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51277037/article/details/131361026

版权

文章介绍了如何利用MobX库和mobx-react-lite库创建React应用的数据store，包括定义可观察变量、方法以及在组件中使用observer进行数据绑定和实时更新。在React组件中，通过observer包裹以实现数据变化时组件的自动刷新，并强调了observer变量的使用位置、基础类型转换以及在useEffect中初始化数据的获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用

下载mobx库和mobx-react-lite库
创建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 bookStore

3.在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();
  }, []);