[Web 前端] mobx教程(三)-在React中使用Mobx

阿新 • • 發佈：2018-12-28

copy from : https://blog.csdn.net/smk108/article/details/85053903

Mobx提供了一個mobx-react包幫助開發者方便地在React中使用Mobx，mobx-react中有observer、Provider、inject幾個常用的api。在《mobx系列(二)-mobx主要概念》中我們已經介紹過observer，本文介紹下inject、Provider，以及Mobx如何與React結合使用。

1、Provider

Provider是一個React元件，使用React的上下文（context）機制，可以用來向下傳遞stores，即把state傳遞給其子元件。

例如，有如下形式的一個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;

使用Provider傳遞store的方式為：

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'));

如果有多個store，可以使用類似於如下形式：

const stores = {
  mainStore, userStore, commonStore
};
ReactDOM.render((
    <Provider {...stores}>
        <App />
    </Provider>
  ), document.getElementById('container'));

2、@inject

inject是一個高階元件，作用是將元件連線到提供的stores。具體說是與Provider結合使用，從Provider提供給應用的state資料中選取所需資料，以props的形式傳遞給目標元件。用法為：

inject(stores)(component)
@inject(stores) class Component...

對應上節的例子，App內使用的元件User使用@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(
            <div className='user'>
                <div className='user_list'>name：{user.name}</div>
                <div className='user_list'>role：{user.name}</div>
                <div className='user_list'>{user.isGuest ? `isGuest：${user.isGuest}` : ''}</div>
                <Button type='primary' onClick={() => this.props.userStore.changeUser()}>Change User</Button>
            </div>
        );
    }
}

3、react-mobx實踐示例

我寫了一個react-mobx的簡單demo，地址為：https://github.com/smk108/mobx_demo ，

demo的結構為：

依據元件的劃分使用了3個store，需要說明的是我是以class的形式建立的store，store中export的是store class的instance，例如第一節中userStore的形式：

const userStore = new userStoreClass();
export default userStore;

在React中使用Mobx的方式有很多，Mobx不會強制要求以某種方式使用它，我在demo中使用的方式僅僅是其中一種。事實上，你可以以任何你喜歡並且能生效的方式使用它。在下一篇《Mobx定義資料儲存》中會介紹、對比文件推薦使用的資料儲存和我的demo中使用的資料結構間的不同。

4、可觀察的區域性元件狀態

Mobx允許在響應式React元件內使用自由地使用狀態，意味著我們可以將一些狀態像普通React元件一樣管理，例如對上面提到的demo中User元件做如下修改：

import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import Timer from '../Timer';
import './style.css';
 
@inject( 'userStore')
@observer
export default class User extends Component{
    constructor(props){
        super(props);
        this.state = {
            userChangeTimes: 0
        };
    }
 
    handleChangeUser(){
        this.props.userStore.changeUser();
        let {userChangeTimes} = this.state;
        userChangeTimes ++ ;
        this.setState({userChangeTimes});
    }
 
    render(){
        const {user} = this.props.userStore;
        return(
            <div className='user'>
                <div className='user_list'>name：{user.name}</div>
                <div className='user_list'>role：{user.name}</div>
                <div className='user_list'>{user.isGuest ? `isGuest：${user.isGuest}` : ''}</div>
                <div>user change times: {this.state.userChangeTimes}</div>
                <Button type='primary' onClick={this.handleChangeUser.bind(this)}>Change User</Button>
                <Timer />
            </div>
        );
    }
}

User元件state的userChangeTimes可以使用setState進行修改，一切都和不使用Mobx時一樣。但是，推薦響應式元件應該沒有或很少有狀態，因為在與其他元件共享的物件中封裝(檢視)狀態通常更方便。針對響應式元件需要維護單獨狀態的情況，Mobx為我們提供了更加方便的一種方式-可觀察的區域性元件狀態。

Mobx允許使用@observable在React元件內引入可觀察屬性，意味著我們不需要通過React 的冗長和強制性的 setState 機制也可以在元件中擁有功能同樣強大的本地狀態(local state)。

用法如下（使用demo中Timer元件舉例）：

import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {observable, action} from "mobx";
import './style.css';
 
@inject('commonStore')
@observer
export default class Timer extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    @observable secondsPassed = 0;
 
    componentWillMount(){
        this.props.commonStore.startTime();
        this.timer = setInterval(this.handleChangeSecondsPassed,1000);
    }
 
    @action.bound handleChangeSecondsPassed(){
        this.secondsPassed ++;
    }
 
    render(){
        const {time} = this.props.commonStore;
        return(
            <div className='time_content'>
                <div>{time}</div>
                <div>Seconds passed:{this.secondsPassed}</div>
            </div>
        );
    }
}

secondsPassed作為元件內可觀察的區域性狀態，不使用setState也觸發UI的響應。

需要注意的是：

可觀察區域性狀態會被render提取呼叫；
可觀察區域性狀態的修改會觸發React的componentWillUpdate和componentDidUpdate生命週期，不會觸發其它的生命週期；
如果你需要使用React的其它生命週期方法，請使用基於state的常規React API；
5、生命週期鉤子

當使用mobx-react時可以定義一個新的生命週期鉤子函式componentWillReact，當元件因為它觀察的狀態發生改變時，元件會重新渲染，這時componentWillReact會觸發，可以幫助追溯渲染並找到導致渲染的動作（action）。

修改demo中User元件舉例如下：

import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import Timer from '../Timer';
import './style.css';
 
@inject( 'userStore')
@observer
export default class User extends Component{
    constructor(props){
        super(props);
        this.state = {
            userChangeTimes: 0
        };
    }
 
    handleChangeUser(){
        this.props.userStore.changeUser();
        let {userChangeTimes} = this.state;
        userChangeTimes ++ ;
        this.setState({userChangeTimes});
    }
 
    componentWillReact() {
        console.log("I will re-render, since the user has changed!");
    }
 
    render(){
        const {user} = this.props.userStore;
        return(
            <div className='user'>
                <div className='user_list'>name：{user.name}</div>
                <div className='user_list'>role：{user.name}</div>
                <div className='user_list'>{user.isGuest ? `isGuest：${user.isGuest}` : ''}</div>
                <div>user change times: {this.state.userChangeTimes}</div>
                <Button type='primary' onClick={this.handleChangeUser.bind(this)}>Change User</Button>
                <Timer />
            </div>
        );
    }
}

需要注意的是：

componentWillReact 不接收引數;
componentWillReact 初始化渲染前不會觸發 (使用 componentWillMount 替代);
componentWillReact 對於 [email protected]+, 當接收新的 props 時並在 setState 呼叫後會觸發此鉤子；
像User元件內通過setState修改userChangeTimes也會觸發此鉤子；
6、React優化

本小節介紹幾項基本的React優化策略，有些是基於在React中使用Mobx時特有的策略，有些是會用React通用的策略。

使用大量的小元件
@observer 元件會追蹤它們使用的所有值，並且當它們中的任何一個改變時重新渲染。所以你的元件越小，它們需要重新渲染產生的變化則越小;這意味著使用者介面的更多部分具備彼此獨立渲染的可能性。

在專用元件中渲染列表（避免多個元件受影響，一起重新渲染）
不要使用陣列的索引作為 key（虛擬dom）
不用使用陣列索引或者任何將來可能會改變的值作為 key

晚一點使用間接引用值
使用 mobx-react 時，推薦儘可能晚的使用間接引用值。這是因為當使用 observable 間接引用值時 MobX 會自動重新渲染元件。如果間接引用值發生在元件樹的層級越深，那麼需要重新渲染的元件就越少。

[Web 前端] mobx教程(三)-在React中使用Mobx

[Web 前端] mobx教程(三)-在React中使用Mobx

web前端【第三篇】CSS選擇器

web前端學習（三）css學習筆記部分（3）-- css常用操作

web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例

web前端學習（三）css學習筆記部分（6）-- 選擇器詳解

web前端學習（三）css學習筆記部分（8）-- SVN的介紹和應用

web前端工程師教程大綱分享

指尖下的js —— 多觸式web前端開發之三：處理複雜手勢

web前端經典教程之偽類妙用

web前端經典教程之複用佈局

Web前端面試指導(三十一)：談談你對this的理解

web前端技術講解之CSS中position的定位技術

2019最新最全珠峰Web前端架構教程

Web前端面試指導(三十七)：eval是做什麼的？

學習web前端之練習三

【免費領取】史上最全的web前端學習教程彙總！

WEB前端 -- 讀取下拉框中的text、value

web前端快取之三sessionStorage

[Web 前端] 006 css 三種頁面引入的方法

2019年史上最全面的web前端學習教程！

[Web 前端] mobx教程(三)-在React中使用Mobx

相關推薦