mobx学习笔记05——使用mobx-react
mobx-react的作用是将react组件转换为对可观察数据的反应。
首先在项目下安装所需依赖：npm i react react-dom prop-types mobx-react -S
（为了编译JSX语法） npm install --save-dev @babel/preset-react
1）将项目中的index.js文件扩展名改为jsx，并修改webpack.config.js中对应的后缀名，以及新装依赖的配置代码。
"presets": [
["@babel/preset-env",{"useBuiltIns":"entry"}],
["@babel/preset-react"]
]
2）创建两个React组件，并把它们显示到页面上，然后通过mobx来修改状态，进而实现驱动视图。
3）在index.jsx中导入所需的各个组件。
Store类用于存储数据
import { observable,action } from 'mobx';
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Store {
cache = {queue: []}
}
const store = new Store();
//Bar Foo
class Bar extends Component {
static propTypes = {
queue: PropTypes.array
};
render() {
const queue = this.props.queue;
return <span>{queue.length}</span>;
}
}
class Foo extends Component {
static propTypes = {
cache: PropTypes.object
};
render() {
const cache = this.props.cache;
return <div><Bar queue={cache.queue} /></div>;
}
}
ReactDOM.render(<Foo cache={store.cache}/>,document.querySelector('#root'));
浏览器页面中显示0，表示编译成功，React项目能够正常运行。
4）为该React程序添加mobx支持
第一步，把Store中的数据转换为可观察数据
class Store {
@observable cache = {queue: []}
}
如果这时有警告⚠️，是因为因为可观察的数组并不是真正的数组，从mobx-react中引入PropTypes即可，为了避免与react官方提供的PropTypes重名，将mobx-react中的PropTypes换一个名字。
import {PropTypes as observablePropTypes} from 'mobx-react'
queue: observablePropTypes.observableArray //queue: PropTypes.array
5)把对可观察数据的修改都封装到action中
在Store中声明action方法
class Store {
@observable cache = {queue: []}
@action.bound refresh() {
this.cache.queue.push(1);
}
}
将refresh传入Foo组件
ReactDOM.render(<Foo cache={store.cache} refresh={store.refresh}/>,document.querySelector('#root'));
在Foo组件中声明button
render() {
const cache = this.props.cache;
return <div><button onClick={this.props.refresh}>Refresh</button><Bar queue={cache.queue} /></div>;
}
但这时点击Refresh按钮并没有反应......
这是因为React组件并没有重新渲染，这时就需要mobx-react登场了！mobx-react可以将React组件的render方法包装成autorun，那我们执行action时是不是就可以触发组件重新渲染了呢？
首先从mobx-react中导入observer方法，该方法也是一个decorator修饰器，与普通修饰器不同的是，它不是用来修饰类成员的，而是用来修饰类本身的，修饰的类为React组件类。
import { observer } from 'mobx-react';
接下来尝试修饰一下Foo组件：
@observer
class Foo extends Component {
static propTypes = {
cache: PropTypes.object
};
render() {
const cache = this.props.cache;
return <div><button onClick={this.props.refresh}>Refresh</button><Bar queue={cache.queue} /></div>;
}
}
此时点击Refresh按钮仍然没有反应......
去掉对Foo的修饰，再尝试修饰一下Bar组件：
@observer
class Bar extends Component {
static propTypes = {
queue: PropTypes.array
// queue: observablePropTypes.observableArray
};
render() {
const queue = this.props.queue;
return <span>{queue.length}</span>;
}
}
这时，按钮终于生效了！每点击一次数字就会增加1，React帮我们重新渲染组件了。
mobx能够精得知autorun依赖哪些可观察数据，做到按需触发，这两个组件虽然有上下级依赖关系，但Foo组件并没有使用到queue属性，而Bar组件用到了。
也就是说，谁真正用到了被修改到可观察数据，谁就会重新渲染，谁也就被observer修饰。
对没有使用任何可观察数据的组件，被修饰也没有什么副作用，因此，考虑到扩展性，建议修饰所有用到到组件。
React中的生命周期函数ShouldComponentUpdate()也可能会取消重新渲染，mobx-react也已经为React组件实现了一个ShouldComponentUpdate()方法，不再需要单独定义它，使得优化React应用程序更加的方便。
mobx-react只是mobx的一种应用场景，mobx并不局限于此。
