mobx的使用
mobx的使用1、APImobx-reactProvider 包裹根组件,用于传递数据observer 组件变为响应式inject 接收mobx实例(用于类组件)MobXProviderContextmobxobservable 声明变量action 声明函数用于修改observable 的值makeObservable 更新状态2、安装yarn add mobxyarn add mobx-rea
·
mobx的使用
1、API
- mobx-react
- Provider 包裹根组件,用于传递数据
- observer 组件变为响应式
- inject 接收mobx实例(用于类组件)
- MobXProviderContext
- mobx
- observable 声明变量
- action 声明函数用于修改observable 的值
- makeObservable 更新状态
2、安装
- yarn add mobx
- yarn add mobx-react
使用@
语法糖需要安装 - yarn add @babel/plugin-proposal-decorators
- yarn add @babel/plugin-proposal-class-properties
3、安装之后需要修改package.json文件
"presets": [
["react-app"],
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
现在就已经可以正常使用mobx了
4、父级入口管理
1、引入mobx-react中的Provider
import {Provider} from 'mobx-react'
2、将仓库中的类进行集中管理
const stores ={
store1 = new Store1( ),
store2 = new Store2( ),
……
}
3、通过Provider向下传递
<Proveder {...stores}></Provider>
5、子组件接收(类组件、函数组件)
- 类组件
1、从react-router-dom引入withRouter
import {withRouter} from 'react-router-dom'
;
2、从mobx-react中引入inject和observer;
3、使用
@withRouter //更新的作用
@inject('store1','store2') //接收
@observer //组件变为响应式
//这三步会把对应的store挂在props上
- 函数组件
1、从react-router-dom引入withRouter
2、从mobx-react中引入inject和MobXProviderContext;
3、使用
//获取mobox实列
//const Store1 = React.useContext(MobXProviderContext)['Store1'];
//简单封装之后
function useStore(name) {
return React.useContext(MobXProviderContext)[name]
}
const Store1 = useStore('Store1')
export default withRouter(observer(componentName))
5.0版本
用class类创建仓库
大多使用`@`语法糖
声明变量 @observable
声明函数 @action (用箭头函数,不然解构会失去this)
监测更新 makeObservable(this)
configure //开启严格模式之后需要用runInAction(()=>{这里写逻辑})
runInAction
6.0版本
用makeAutoObservable( )创建对象
不能写箭头函数,所以使用方法时不能解构,不然会失去this
6、 5.0版本案列
目录
src
store
- index.js
- num.js
views
About
- index.jsx
src/store/index.js
这个文件主要是引入所有的mobx文件,做一个统一的导出
import Num from './num.js';
const stores = {
num: new Num()
}
export default stores;
src/store/num.js
import { observable, action, makeObservable } from 'mobx';
class Num {
constructor() {
//获取this
makeObservable(this)
}
//声明变量
@observable num = 0;
//声明函数
@action
increment = () => {
this.num += 1
}
@action
decrement = () => {
this.num -= 1
}
}
export default Num
src/views/About/index(函数组件写法)
withRouter数据更新 +MobXProviderContext接收变量+observer 数据响应
import React, { Fragment, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { MobXProviderContext,observer } from 'mobx-react'
const View = () => {
const {num,increment,decrement} = React.useContext(MobXProviderContext)['num']
useEffect(() => {
console.log(num)
},[])
return (
<Fragment>
<h2>关于页面</h2>
<hr />
{num}
<button onClick={increment}>增加1</button>
<button onClick={decrement}>减小1</button>
</Fragment>
)
}
export default withRouter(observer(View))
src/views/About/index(类组件写法)
withRouter更新+inject接收+observer数据响应
inject接收的是store的属性
通过this.props可以拿到值
import React, { Fragment,Component } from 'react';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
//这里注意要放在组件之外
@withRouter
@inject('num')
@observer
class View extends Component{
componentDidMount() {
console.log(this.props.num)
}
render() {
let {num,increment,decrement}=this.props.num
return (
<Fragment>
<h2>关于页面</h2>
<hr />
{num}
<button onClick={increment}>增加1</button>
<button onClick={decrement}>减小1</button>
</Fragment>
)
}
}
export default View
更多推荐
已为社区贡献1条内容
所有评论(0)