Mobx的介紹

Mobx是一個功能強大，上手非常容易的狀態(tài)管理工具。redux的作者也曾經(jīng)向大家推薦過它，在不少情況下可以使用Mobx來替代掉redux。

Mobx流程圖

Mobx使用流程

創(chuàng)建項目

npx create-react-app mobx復(fù)制代碼

進入項目

cd mobx復(fù)制代碼

項目抽離

yarn eject復(fù)制代碼

安裝mobx mobx-react

yarn add mobx mobx-react復(fù)制代碼 注意： 如果git沖突解決： 我們要原操作先放到本地暫存盤git add .git commit -m '安裝mobx mobx-react'注意不要git push

配置裝飾器（修飾器 es6 ） babel

yarn add babel-plugin-transform-decorators-legacy -D yarn add @babel/preset-env -D yarn add babel-plugin-transform-class-properties -D yarn add @babel/plugin-proposal-decorators -D復(fù)制代碼

配置package.json

"babel": {"plugins": [["@babel/plugin-proposal-decorators",{"legacy": true}],"transform-class-properties"],"presets": ["react-app","@babel/preset-env"]}, 復(fù)制代碼

注意： 以下兩個配置順序不可更改

["@babel/plugin-proposal-decorators",{"legacy": true}],"transform-class-properties"復(fù)制代碼

項目中 mobx應(yīng)該怎么用？

新建store目錄

src下建立

srcstorehomeindex.jscar index.jsindex.js

以這種結(jié)構(gòu)建立文件和目錄

在主入口文件中 使用 Provider

import store from './store'import { Provider } from 'mobx-react'ReactDOM.render(<Provider store = { store }><App /></Provider> , document.getElementById('root'));復(fù)制代碼

打造mobx 數(shù)據(jù)包

import {observable, computed,action} from 'mobx'class Home {@observable //監(jiān)聽 ageage = 18@computed //當(dāng)age發(fā)生改變時， 自動觸發(fā)get doubleAge(){return this.age *= 2}@action // 用戶操作 事件調(diào)用increment(){this.props.store.home.age ++ console.log( this.props.store.home.age )//數(shù)據(jù)請求fetch('/data/data.json').then(res => res.json()).then( result => console.log( result )).catch( error => console.log( error ))}}const home = new Home()export default home復(fù)制代碼

打造store

store/index.js

import home from './home'const store = {//實例home}export default store復(fù)制代碼

組件內(nèi)使用數(shù)據(jù)

this.props.store.xxx 可以拿到數(shù)據(jù)

注意：

this.porps里面沒有找到 @action 裝飾器定義的方法， 但是可以直接使用，

this會丟失 this.props.store.home.increment.bind(this)

在你要使用store的組件上記得做觀察

import React,{ Component,Fragment } from 'react' import { inject,observer } from 'mobx-react'@inject('store') @observer class Count extends Component {constructor ( props ) {super( props )props.store.count.change = props.store.count.change.bind( this )//this丟失的解決}increment = () => {console.log( 'mine' )this.props.store.count.change()}render () {return (<Fragment><button onClick = { this.increment }>點我+</button><p>count:{ this.props.store.count.count} </p></Fragment>)} }export default Count復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的React中的状态管理---Mobx的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。