Reactjs 莫布是个尴尬的案子。若我使用console.log（userStore），那个么它会更新组件

我让userStore管理身份验证状态。当firebase auth成功获取auth数据时，userStore将执行更改加载属性的操作

class userStore {
  constructor() {
    auth.onAuthStateChanged(user => {
      this.login(user)
      this.loadingDone()
    })
  }

  @observable user
  @observable loading = true

  @computed get getUser() {
    return this.user
  }

  @computed get getLoading() {
    if (this.user) {
      return false
    }
    return this.loading
  }

  @action
  login(user) {
    this.user = user
  }

  @action
  logout() {
    this.user = null
  }

  @action
  loadingDone() {
    this.loading = false
    console.log(this.loading)
  }
}

现在我想通过userStore.loading属性更改PrivateRoute组件。但如果没有console.loguserStore.getLoading MOBX，则不会更新组件

@observer(['userStore'])
class PrivateRoute extends Component {
  render() {
    const { component: Component, userStore } = this.props
    console.log(userStore.getLoading) # <- WHAT HAPPENS HERE?????
    return (
      <Route
        render={props =>
          userStore.getLoading ? (
            <div>getting auth...</div>
          ) : userStore.getUser ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/login',
                state: { from: props.location }
              }}
            />
          )
        }
      />
    )
  }
}

---

我无法理解Mobx的默认行为。是否取决于console.log？

Mobx根据您在组件中使用的属性检测组件更改

当您console.loguserStore.getLoading时，mobx知道您的组件依赖于此，在组件发生更改时加载并重新提交组件

在下面的路由中使用userStore.getLoading不起作用，可能是因为它是在不同的功能组件中定义的

要实现此功能，可以将管线中的构件拆分为单独的构件，并为其指定观察者标记