javascript - MobX 自动运行和构造函数内部的 react

Question

autorun 和reaction 是否必须在constructor 中才能工作？ 我可以在没有构造函数的情况下编写这个简单的示例吗？

此外，我在 autorun 中的代码也可以正常运行，但如果我将其更改为 console.log(this.expenses)，它就无法运行。这是为什么？

import { observable, action, computed, useStrict, autorun, reaction } from 'mobx'
useStrict(true)

class ExpensesStore {

  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }

  }


  constructor() {
    autorun(() => {
      console.log(`${this.expenses}`)
    })

    reaction(
      ()=>this.expenses.map(expense => expense), expense => console.log(expense)
    )
  }


}

const store = window.store= new ExpensesStore()

export default store

Answer 1

autorun 和reaction 不必在构造函数中。例如，如果您愿意，可以这样做:

示例

class ExpensesStore {
  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }
  }
}

const store = new ExpensesStore()

autorun(() => {
  console.log(`${store.expenses}`)
})

reaction(
  () => store.expenses.map(expense => expense), expense => console.log(expense)
)

console.log(`${this.expenses}`) 有效而 console.log(this.expenses) 无效的原因是因为你在编写 this.expenses 时，不要取消引用浅数组中的任何内容。

当你写...

`${this.expenses}`

...您正在对 this.expenses 隐式调用 toString()。您可以使用 toJS或 slice 在不将其放入字符串中时获得相同的效果:

示例 ( JSBin )

class ExpensesStore {
  @observable.shallow expenses = []

  @action addExpense = (expense) => {
   this.expenses.push(expense)
  }

  @computed get getExpense() {
    if(this.expenses.length > 0) {
      return `This is computed from ${this.expenses[0] + this.expenses[1]}`
    }
  }
}

const store = new ExpensesStore()

autorun(() => {
  // store.expenses.slice() works just as well
  console.log(toJS(store.expenses))
})

reaction(
  () => store.expenses.map(expense => expense), expense => console.log(expense)
)

setTimeout(() => {
  store.addExpense(1000)
}, 1000)