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中