Mobx尴尬的案子。如果我控制台.log（userStore）然后它更新组件

Question

我让userStore来管理身份验证状态。当firebase auth成功获取auth数据时，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)
  }
}

现在我想通过PrivateRoute属性更改我的userStore.loading组件。但没有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知道你的组件依赖于该加载，然后在组件发生变化时重新渲染它。

在下面的Route中使用userStore.getLoading不计算（可能是因为它在不同的功能组件中定义）this article may help

因此，您可以将Route中的组件拆分为单独的组件，并将其标记为观察者。它会工作