Mobx的介紹

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

Mobx流程圖

Mobx使用流程

創建項目

npx create-react-app mobx復制代碼

進入項目

cd mobx復制代碼

項目抽離

yarn eject復制代碼

安裝mobx mobx-react

yarn add mobx mobx-react復制代碼 注意： 如果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復制代碼

配置package.json

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

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

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

項目中 mobx應該怎么用？

新建store目錄

src下建立

srcstorehomeindex.jscar index.jsindex.js

以這種結構建立文件和目錄

在主入口文件中 使用 Provider

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

打造mobx 數據包

import {observable, computed,action} from 'mobx'class Home {@observable //監聽 ageage = 18@computed //當age發生改變時， 自動觸發get doubleAge(){return this.age *= 2}@action // 用戶操作 事件調用increment(){this.props.store.home.age ++ console.log( this.props.store.home.age )//數據請求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復制代碼

打造store

store/index.js

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

組件內使用數據

this.props.store.xxx 可以拿到數據

注意：

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復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。