MobX 自动运行和构造函数内的反应

Question

自动运行和反应必须在构造函数内部才能工作吗？我可以在没有构造函数的情况下编写这个简单的示例吗？

另外，我在自动运行中的代码可以正常运行，但如果我将其更改为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

自动运行和反应不必在构造函数中。例如，如果您愿意，您可以这样做：

例子

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}`

...你在隐含地toString()呼吁this.expenses。当不将其放入字符串中时，您可以使用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)