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