[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 = 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((

), document.getElementById('container'));

如果有多个store，可以使用类似于如下形式：

const stores = {

mainStore, userStore, commonStore

};

ReactDOM.render((

), 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(

);

}

}

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(

);

}

}

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(

);

}

}

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(

);

}

}

需要注意的是：

componentWillReact 不接收参数;
componentWillReact 初始化渲染前不会触发 (使用 componentWillMount 替代);
componentWillReact 对于 mobx-react@4+, 当接收新的 props 时并在 setState 调用后会触发此钩子；
像User组件内通过setState修改userChangeTimes也会触发此钩子；
6、React优化

本小节介绍几项基本的React优化策略，有些是基于在React中使用Mobx时特有的策略，有些是会用React通用的策略。

使用大量的小组件
@observer 组件会追踪它们使用的所有值，并且当它们中的任何一个改变时重新渲染。 所以你的组件越小，它们需要重新渲染产生的变化则越小;这意味着用户界面的更多部分具备彼此独立渲染的可能性。

在专用组件中渲染列表（避免多个组件受影响，一起重新渲染）
不要使用数组的索引作为 key（虚拟dom）
不用使用数组索引或者任何将来可能会改变的值作为 key

晚一点使用间接引用值
使用 mobx-react 时，推荐尽可能晚的使用间接引用值。 这是因为当使用 observable 间接引用值时 MobX 会自动重新渲染组件。 如果间接引用值发生在组件树的层级越深，那么需要重新渲染的组件就越少。