reacr函数组件中使用mobx
时间: 2024-05-15 14:16:07 浏览: 11
要在React函数组件中使用MobX,你需要将组件包裹在MobX Provider中。
首先,你需要在你的应用程序中安装MobX和MobX React。
```javascript
npm install mobx mobx-react --save
```
然后,你需要创建一个MobX Store来管理你的应用程序状态。在这个例子中,我们创建了一个名为TodoStore的Store。
```javascript
import { observable, action } from 'mobx';
class TodoStore {
@observable todos = [];
@action addTodo = (todo) => {
this.todos.push(todo);
}
}
export default new TodoStore();
```
接下来,你需要将Provider和Store组合在一起。在这个例子中,我们将TodoStore传递给Provider。
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import TodoStore from './TodoStore';
import App from './App';
ReactDOM.render(
<Provider TodoStore={TodoStore}>
<App />
</Provider>,
document.getElementById('root')
);
```
现在,你可以在你的组件中使用MobX Store。在这个例子中,我们在Todo组件中使用了TodoStore。
```javascript
import React from 'react';
import { observer, inject } from 'mobx-react';
const Todo = inject('TodoStore')(observer(({ TodoStore, todo }) => (
<li>{todo} <button onClick={() => TodoStore.removeTodo(todo)}>Remove</button></li>
)));
export default Todo;
```
在这里,我们使用`inject`将TodoStore注入到Todo组件中,并使用`observer`将Todo组件转换为可观察的组件,以便当TodoStore中的数据发生变化时,Todo组件能够自动更新。
现在你已经知道如何在React函数组件中使用MobX了。记得在组件中使用MobX Store时,使用`inject`和`observer`将组件转换为可观察的组件,并将Store注入到组件中。