React mobx 基础使用
Posted p71a3fj5
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React mobx 基础使用相关的知识,希望对你有一定的参考价值。
组件通信
- props
- context
- redux mobox
任意组件间的数据通信
### mobx
会有一个单独的js文件进行管理
父组件 数据注入 Provider
子组件 (任意组件)
安装
yarn add mobx
npm install mobx --save- 有一个包
父级的入口管理
- 引入 mobx-react 使用Provider
引入store.js 中的文件 (可能是多个)
new Store()添加 - 引入一个新的store
- stores={
newStore:new NewStore(),
}- 使用Provider 注入 { ...stores }
### 报错
由于mobx 不支持@语法所以会报错
// import {observable, computed, action} from \'mobx\';
3 | class Store {
> 4 | @observable tradeCfg = {
| ^
5 | \'sadf\': \'sadf\'
6 | };
7 | @observable baseInfo = {};
<!-- 解决方案:
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties
-->
解决方法
- 1:
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties- 2:在package.json中 找到 babel下的 presets 替换代码
"presets": [
["react-app"],
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
如何在页面中读取 mobx 数据
类组件
需要的子页面使用- import { withRouter } from \'react-router-dom\';//1. 引入
- import { observer,inject } from \'mobx-react\';
在类组件的上面
// 1.引入需要的模块 import { withRouter } from \'react-router-dom\';//1. 引入 import { observer, inject } from \'mobx-react\'; //2.使用引入的模块 @withRouter @inject(\'FirstStore\',)//多个之前需要,号隔开 @observer
- 从this.props上解构使用
函数组件
使用时父级的入口管理不变;
子组件使用 读取值;
- import { withRouter } from \'react-router-dom\'; //用来连接router更新数据的
- import { observer, MobXProviderContext } from \'mobx-react\';// 用来
function useStores(name) {
return React.useContext(MobXProviderContext)[name] } === 上面方法等价于下面的这个 react.useContext(MobXProviderContext).FirstStore;
导出时先试用 observable()包裹组件,然后再用WithRouter在包裹
export default withRouter(observable( View ))
mobx 文档解构
mobx 步骤
<!--
1.引入mobx
- 定义一个Class类 在外面调用
- 使用 observable 来定义 数据
- 使用 observer 与页面进行关联
- 使用 action 修改我们的数据
【ovserver】 页面中进行 读取,修改 的操作
定义state () 相当于state 定义基础数据类型 与 复合数据类型
-->
// mobx 文件解构
import { observable, computed, action, autorun, runInAction, makeObservable } from \'mobx\'
// 有一个类
class Store{
@obserbable name=\'小张\'; //用 @obserbable 来定义数据 【基本数据类型,复合数据类型】
@action //使用 @action 来定义方法
fn=(text)=>{
this.name=text
}
}
export default Store;
在页面上修改mobx 的数据
类组件 修改mobx
import { observer,inject } from \'mobx-react\';
@withRouter
@inject(\'FirstStore\',\'SecondStore\')//多个之前需要,号隔开
@observer
class View extends Component {
static contextType = DataContext;
render() {
console.log(\'assssssssssss\', this.props)
const { FirstStore,SecondStore } = this.props// 读取方法
// console.log(FirstStore,\'aaaaaaaaaaaaaaaaaaaaaaaa\')
this.props.SecondStore.fn()
const { fn, name } = this.props.SecondStore;//从你生成的实例对象中【SecondStore】解构store.js中你使用action定义方法,
return (
<div>
{fn(\'狗狗萌\')}
{name}
<button onClick={()=>{fn(\'小琪\')}}>safdsf </button>
//调用actions定义的方法来修改 observable 的值
{FirstStore}
</div>
)
}
}
export default View
在修改值的过程中会发现 打印的数据修改了但是页面上的数据并没有改变
解决方案 store.js中加入
constructor() {
makeObservable(this);
}
import { observable, computed, action, autorun, runInAction, makeObservable } from \'mobx\';
class Store {
@observable name = \'小张\'
constructor() {
makeObservable(this);//解决了打印内容修改 , 但是页面为改变内容的为改变
}
// 方法一 makeObservable(this)
// 方法二 @action.bound
@action//.bound //用来声明的函数
fn = (text) => {
this.name = text
}
}
export default Store;
以上是关于React mobx 基础使用的主要内容,如果未能解决你的问题,请参考以下文章
使用 mobx-react-stores 开发 react 应用
Jest/React/Mobx:TypeError mobxReact.observer 不是函数
前端开发日常 - 7简单粗暴,在React中快速使用Mobx