title: 创建惰性 observables sidebar_label: 惰性 observables {🚀}

hide_title: true

创建惰性 observables {🚀}

Usage:

  • onBecomeObserved(observable, property?, listener: () => void): (() => void)
  • onBecomeUnobserved(observable, property?, listener: () => void): (() => void)

onBecomeObserved和onBecomeUnobserved方法可以给现有的可观察对象附加惰性行为或副作用。它们是MobX可观察系统的钩子并且 当可观察对象开始和停止被观察时，它们会得到通知。它们都返回一个用来取消listener的disposer函数。

在下面的示例中，我们只在实际使用被观察值时才使用它们来执行网络获取。

  1. export class City {
  2.     location
  3.     temperature
  4.     interval
  6.     constructor(location) {
  7.         makeAutoObservable(this, {
  8.             resume: false,
  9.             suspend: false
  10.         })
  11.         this.location = location
  12.         // 只有在实际使用温度时才开始获取数据!
  13.         onBecomeObserved(this, "temperature", this.resume)
  14.         onBecomeUnobserved(this, "temperature", this.suspend)
  15.     }
  17.     resume = () => {
  18.         log(`Resuming ${this.location}`)
  19.         this.interval = setInterval(() => this.fetchTemperature(), 5000)
  20.     }
  22.     suspend = () => {
  23.         log(`Suspending ${this.location}`)
  24.         this.temperature = undefined
  25.         clearInterval(this.interval)
  26.     }
  28.     fetchTemperature = flow(function* () {
  29.         // 获取数据的逻辑...
  30.     })
  31. }