如何在 MobX 中使用 React 生命周期方法？答案

【问题标题】：How do I use React lifecycle methods with MobX?如何在 MobX 中使用 React 生命周期方法？
【发布时间】：2017-08-28 23:25:58
【问题描述】：

仅使用 MobX 存储会消除常规有状态组件的功能吗？目前，我正在使用 componentDidUpdate 来访问 prevState 和 prevProps 并根据它们的值调用其他方法。如何在 MobX/React MobX 商店中访问类似的生命周期方法？

更具体地说，这是我当前的代码在我的生命周期函数之一中的样子：

componentDidUpdate(prevProps, prevState) {
    const currentWidth = this.state.width.window;
    const prevWidth = prevState.width.window;
    if (currentWidth !== prevWidth) {
        this.setState({...});
    }
}

如何使用 MobX/MobX React 有效地做同样的事情？

换句话说，我如何（不使用 this.state、构造函数和生命周期方法）访问 Mobx 存储中的 prevProps 和 prevState 之类的东西？

【问题讨论】：

标签： javascript reactjs state mobx mobx-react

【解决方案1】：

MobX 试图解决的是在组件之间共享“全局”状态的问题，例如：用户可能已登录或注销，并且多个组件需要根据该情况采取不同的行为。 MobX 允许您将“状态”（登录/退出）移到组件之外，因为它实际上是业务逻辑，而不是表示逻辑。当然，您仍然需要 this.state 和 this.setState 来获取那些非常特定于组件的状态，以保持商店清洁。

我的意思是：MobX 并没有真正取代任何东西，把它当作一种干净简单的方式来接收新状态，而不使用this.state。你可以（并且将）仍然使用 react 生命周期方法来响应新状态（当 MobX 检测到状态变化时运行正常的生命周期过程），你仍然可以使用 this.state 来处理非全局状态

【讨论】：