在React项目中使用MobX,需要先安装MobX和MobX React绑定库,可以使用以下命令进行安装:
npm install mobx mobx-react --save
在MobX中,需要创建一个Store来管理数据状态。Store就是一个普通的JavaScript类,需要使用装饰器来标记需要响应式更新的属性和方法。
import { observable, action } from 'mobx';
class Store {
@observable data = [];
@action fetchData() {
// 异步请求数据,并更新data属性
}
}
export default new Store(); // 创建单例
为了让React组件能够访问到Store中的数据,需要使用MobX React提供的Provider组件,在应用的根组件中注入Store。
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import store from './store';
import App from './App';
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
在React组件中,通过使用MobX React提供的observer高阶组件来实现观察Store中的数据变化,并同步更新组件。
import React from 'react';
import { observer, inject } from 'mobx-react';
@inject('store')
@observer
class MyComponent extends React.Component {
componentDidMount() {
this.props.store.fetchData();
}
render() {
const { data } = this.props.store;
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
}
export default MyComponent;
在上面的代码中,使用@inject('store')将Store注入到组件的props中,使用@observer观察data属性的变化。当data属性发生变化时,组件会自动重新渲染。