网站做好后怎么更新内容,word模板网站,网站图片尺寸,网站都有哪些类型MobX 是一个身经百战的库#xff0c;它通过运用透明的函数式响应编程#xff08;Transparent Functional Reactive Programming#xff0c;TFRP#xff09;使状态管理变得简单和可扩展。官网地址#xff1a;关于 MobX | MobX中文文档 | MobX中文网
安装依赖
mobx-react-…MobX 是一个身经百战的库它通过运用透明的函数式响应编程Transparent Functional Reactive ProgrammingTFRP使状态管理变得简单和可扩展。官网地址关于 MobX | MobX中文文档 | MobX中文网
安装依赖
mobx-react-lite是一个mobx和react建立链接的依赖库也必须安装才可以使用
yarn add mobx yarn add mobx-react-lite 创建一个或者多个store
并使用store/index.js统一管理这样以后只需要使用统一的一种方式就可以了
CountStore.js一个存储数据的store
import { makeAutoObservable } from mobxclass CountStore {count 0constructor() {makeAutoObservable(this)}addCount () {this.count}
}export default CountStore
统一管理的index.js
import CountStore from ./count;
import MyInfo from ./info;
import React from react;class Store {constructor() {this.countStore new CountStore()this.myInfo new MyInfo()}
}// 使用context是为了让react识别到Store里面的mobx不然react不认识Store
const rootStore new Store()
const context React.createContext(rootStore)
export const useStore () React.useContext(context)
在组建中使用
像使用hooks一样使用store也可以使用解构赋值的形式将countStore解构出来:
import React from react
import { useStore } from ./store
import { observer } from mobx-react-litefunction App() {const { countStore, myInfo } useStore()return (divh2APP组件/h2div classNamecount-boxcount状态: {countStore.count}button onClick{countStore.addCount}/button/divdivmyinfo状态: {myInfo.myCar.join()}myAge状态: {myInfo.FilterAge.join(||)}button onClick{myInfo.addCar}修改内容/button/div/div)
}export default observer(App)使用效果 可以在React组建中调试查看数据找到对应的组件然后查看Hooks下Context属性找到里面有store的那个然后打开即可查看里面存储的数据
