react函数组件使用mobx
时间: 2023-08-29 15:07:50 浏览: 70
要在 React 函数组件中使用 MobX,需要使用 `observer` 函数将组件包装起来,以便 MobX 能够追踪组件状态的变化。
首先,需要在组件文件中引入 `observer` 和 `useObserver`:
```javascript
import { observer, useObserver } from "mobx-react-lite";
```
然后,将组件包装起来:
```javascript
const MyComponent = observer(() => {
// 组件代码
});
```
在组件内部使用 `useObserver`,可以让 MobX 追踪到组件状态的变化并重新渲染组件:
```javascript
const MyComponent = observer(() => {
const { store } = useStore(); // 获取 MobX Store
return useObserver(() => (
<div>
<h1>{store.title}</h1>
<button onClick={() => store.changeTitle("New Title")}>Change Title</button>
</div>
));
});
```
其中,`useStore` 是一个自定义的 Hook,用于获取 MobX Store。在组件内部使用 `useObserver` 包裹需要追踪的状态,这里是 `store.title`。当 `store.title` 发生变化时,组件会自动重新渲染。