React + MobX (mobx-utils) 实现深度监听值变化

时间: 2022-02-10

分类: React

相关链接：
- https://github.com/mobxjs/mobx/issues/214#issuecomment-430218360
- https://github.com/mobxjs/mobx-utils#deepobserve

## 安装 mobx-utils

mobx-utils GitHub 项目地址: https://github.com/mobxjs/mobx-utils

`yarn add mobx-utils` 或者 `npm install --save mobx-utils`

## 使用 mobx-utils

此代码仅仅是示例代码

> ⚠️ 注意，根据自己的业务逻辑，如页面切换后调用 `disposer()` 去注销监听，否则**重复注册**深度监听会造成内存泄漏！

SettingsStore.ts:
```ts
import {action, makeObservable, observable} from "mobx";

export interface ISettingsStore{
  show: boolean;
}

export default class SettingsStore implements ISettingsStore {
  @observable public show: boolean = false;

constructor() {
    makeObservable(this)
  }
}

```

SettingsPage.tsx:
```ts
const settingsStore = new SettingsStore()

const disposer = deepObserve(settingsStore, (change, path) => {
	console.log(change)
})

// 请注意，根据自己的业务逻辑，如页面切换后调用 disposer() 去注销监听，否则重复注册深度监听会造成内存泄漏！
// disposer()
```

---

## 个人项目实践

1. 将**注册监听器**和**销毁监听器**放到一个文件导出来
2. 在需要用的页面(A 页面)，初始化完成后(如从 API 成功获取数据)，执行**注册监听器**
3. 在路由上监听，离开 A 页面事件，执行**销毁监听器**