Question

从Redux切换到MobX进行React之后，我开始非常喜欢MobX。太棒了。

MobX具有某些行为，如果提供的store observable未在渲染中使用，它将不更新组件。我认为通常这是一个很棒的行为，它使组件仅在实际发生更改时才呈现。

但是...我确实遇到过两种情况，这些情况是我不想或不需要在render方法中使用MobX可观察的，在这种情况下，我的this.props.store在MobX存储中不会得到更新。

在这种情况下，作为一种解决方法，我只是在render方法中引用了observable，但我认为这不是一种非常干净的方法，我想知道是否有一种更干净的方法可以做到这一点？ >

此组件代码应进一步说明我的确切要求。它是一个组件，可根据我在商店中看到的MobX来更改车身溢出样式。

/*------------------------------------*\
  Imports
\*------------------------------------*/
import React from 'react';
import connectStore from 'script/connect-store';
import addClass from 'dom-helpers/class/addClass';
import removeClass from 'dom-helpers/class/removeClass';


/*------------------------------------*\
  Component
\*------------------------------------*/
class Component extends React.Component {

  constructor(props) {
    super(props);
    this.constructor.displayName = 'BodyClassSync';
  }

  componentDidMount() {
    this.checkAndUpdateMuiClass();
  }

  componentDidUpdate() {
    this.checkAndUpdateMuiClass();
  }

  checkAndUpdateMuiClass() {

    // This place is the only place I need latest MobX store... 
    if (this.props.store.muiOverlay) {
      addClass(window.document.body, 'mod-mui-overlay');
    }

    else {
      removeClass(window.document.body, 'mod-mui-overlay');
    }

  }


  render() {

    // This is my workaround so the componentDidUpdate will actually fire
    // (with latest and updated store)
    // when the 'muiOverlay' observable changes in the MobX store
    // Is there any cleaner/better way to do this?
    this.props.store.muiOverlay;

    // This component doesn't and shouldn't render anything
    return null;

  }



}



/*------------------------------------*\
  Export
\*------------------------------------*/
const ComponentWithStore = connectStore(Component);
export default ComponentWithStore;

（注意：我不使用@decorators，我在connectStore函数中使用ES5语法连接存储。如果在ES5中也可以解决此问题，那就太棒了。）

Answer 1

您可以在componentDidMount中使用autorun，并在componentWillUnmount中放置侦听器，这样就不必在render方法中引用它。

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.constructor.displayName = 'BodyClassSync';
  }

  componentDidMount() {
    this.dispose = autorun(() => {
      const { muiOverlay } = this.props.store;

      if (muiOverlay) {
        addClass(window.document.body, 'mod-mui-overlay');
      } else {
        removeClass(window.document.body, 'mod-mui-overlay');
      }
    });
  }

  componentWillUnmount() {
    this.dispose();
  }

  render() {
    return null;
  }
}

由于您实际上没有在此组件中执行任何操作，因此您也可以将autorun直接放在商店中。

Answer 2

不确定我是如何错过它的，但是由于@Tholle，我重新阅读了MobX文档中的“对可观察对象进行响应”部分，发现reaction助手是最适合我的解决方案。

同时，reaction最适合我遇到的确切问题。 autorun和when助手在功能上非常相似，我可能也可以在我的用例中使用它们。

https://mobx.js.org/refguide/autorun.html

https://mobx.js.org/refguide/when.html

https://mobx.js.org/refguide/reaction.html

这是代码示例，该示例演示如何将reaction用于只需要快速复制+粘贴的任何人：

componentDidMount(){
  this._notificationsReactionDispose = mobx.reaction(
    () => this.props.store.notifications,
    (notifications, reaction) => {
      ... the code that runs when "notifications" in my store change
    }
  );
}

componentWillUnmount() {
  this._notificationsReactionDispose();
}

在render方法中未使用可观察的情况时，如何使MobX更新组件？

2 个答案: