MOBX尴尬案例.如果我console.log(userstore)，则它会更新组件

Question

我已经制作了userStore来管理Auth State。当Firebase Auth成功获取Auth Data时，userStore要更改loading属性的操作。

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.log(userStore.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？

Answer 1

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

当您console.log(userStore.getLoading)时，MOBX知道您的组件取决于它，当组件更改时加载和重新启动。

在下面的路由中使用userStore.getLoading并不计算（可能是由于在不同的功能组件中定义的）。本文可能会有所帮助。

为了使这项工作，您可以将组件分为单独的组件，并将其赋予观察者标签。