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中  

12-15 17:22
查看更多