react+mobx使用心得
mobx使用
配置编译器装饰器 第一步：npm run eject 配置文件释放出来，会在package.json文件内出现一个bable的配置项 第二步：package.json配置bable字段 下载 @babel/plugin-proposal-decorators 插件 "babel":{ "presets":{ "react-app" }, "plugins":[ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] } 第三步：重启项目
在项目得类组件中使用mobx
-
下载mobx插件 npm i mobx -D 1>在store文件夹下，使用mobxc的observable装饰器，定义可观察的状态
import {observable,action} from "mobx" class user{ @observable isLogin="xxx"//这个是数据，也相当于可以观察的数据 @action//这个是创作的地方，也可以写请求，可以直接修改数据由@abservable声明的都是可观察数据 login(){ } }下载 npm i mobx-react 2> 在组件的根目录中，使用mobx-react的Provider的组件给子组件提供仓库 3>使用mobx-react的observer把党建组件变成可观察的（创库状态更新之后，组件会理解更新） 4>使用mobx-react的inject方法，想组件内注入指定的状态，会把状态注入到组件的props
类组件的使用 - store组件（创库） >
import {observable, computed, action} from 'mobx'; class userStoreClass { @observable user = { name: 'admin', role: '管理员' }; count = 0; @computed get userName(){ return this.user.name; } @action changeUser(){ if(this.count % 2 === 1){ this.user = { name: 'admin', role: '管理员' }; }else{ this.user.name = 'guest'; this.user.role = '访客'; this.user.isGuest = 'true'; } this.count ++; } } const userStore = new userStoreClass(); export default userStore; > - 根目录使用Prvider > import React from 'react'; import ReactDOM from 'react-dom'; import {configure} from 'mobx'; import {Provider} from 'mobx-react'; import userStore from './models/userStore'; import App from './components/App'; // 状态始终需要通过动作来更新(实际上还包括创建) configure({'enforceActions': 'always'}); ReactDOM.render(( <Provider store={userStore}}> <App /> </Provider> ), document.getElementById('container')); > - 多个仓库组件 > const stores = { mainStore, userStore, commonStore }; ReactDOM.render(( <Provider {...stores}> <App /> </Provider> ), document.getElementById('container')); > - @inject使用方法 > import React, {Component} from 'react'; import {inject, observer} from 'mobx-react'; import {Button} from 'antd'; import './style.css'; @inject( 'userStore') @observer export default class User extends Component{ constructor(props){ super(props); this.state = {}; } render(){ // 可以以this.props.userStore形式获取store内state const {user} = this.props.userStore; // 以.形式使用对象的属性值 return(); } } > > >在项目的函数式组件内使用mobxname：{ user.name}role：{ user.name}{user.isGuest ?<Button type='primary' onClick={() => this.props.userStore.changeUser()}>Change User</Button>isGuest：${user.isGuest}: ''}- 下载mobx
1）在store文件夹下，使用mobx的observerable装饰器，定义可观察的状态
- 下载mobx-react-lite
2)react内的createContext的方法创建上下文对象，把store作为上下文对象的初始值
import {createContext} from 'react'; import store from '../store/';
let storeContext = createContext(store); //创建上下文对象
export default storeContext
3)在组件内，使用useContext取上文对象的初始值（store）
如看不懂本人所写，可以看本人学习地方---https://www.cnblogs.com/0616--ataozhijia/p/10192700.html