[Web 前端] mobx教程(三)-在React中使用Mobx
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 = newuserStoreClass(); 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 會自動重新渲染元件。 如果間接引用值發生在元件樹的層級越深,那麼需要重新渲染的元件就越少。