当React props更改时，Mobx存储更新

Question

我正在创建一个通用的反应组件，我在内部使用mobx来控制组件状态。我需要实现的是除了将所有业务逻辑保存在Store中，当用户更改showSomething prop时，商店应该知道它以便fetchSomeStuffs运行并更改anotherThing。

// Application using the component
@observer
class MyApplication extends React.Component {
  @observable
  showSomething = false;

  changeThings = () => {
    this.showSomething = true;
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.changeThings}>Change Show Something</button>
        <MyComponent showSomething={showSomething} />
      </React.Fragment>
    );
  }
}

class Store {
  @observable
  showSomething = false;

  @observable
  anotherThing = [];

  @action
  setShowSomething = value => {
    this.showSomething = value;
  };

  // I'll dispose this later...
  fetchSomeStuffs = autorun(() => {
    const { showSomething } = this;

    // Update some other stuffs
    if (showSomething) {
      this.anotherThing = [1, 2, 3];
    } else {
      this.anotherThing = [];
    }
  });
}

@observer
class MyComponent extends React.Component {
  static propTypes = {
    showSomething: PropTypes.bool
  };

  constructor() {
    super();
    this.store = new Store();
  }

  componentDidMount() {
    const { setShowSomething } = this.store;
    this.setSomethingDispose = autorun(() =>
      setShowSomething(this.props.showSomething)
    );
  }

  componentWillUnmount() {
    this.setSomethingDispose();
  }

  render() {
    return (
      <Provider store={this.store}>
        <MySubComponent />
      </Provider>
    );
  }
}

@inject("store")
@observer
class MySubComponent extends React.Component {
  render() {
    const { showSomething, anotherThing } = this.props.store;
    return (
      <div>
        MySubComponent
        {showSomething && "Something is finally showing"}
        {anotherThing.map((r, i) => {
          return <div key={i}>{r}</div>;
        })}
      </div>
    );
  }
}

这是我发现实现它的方式，所有逻辑都在Store中，我在我的主要组件的componentDidMount中使用自动运行，始终保持商店的showSomething变量与prop相同。我怀疑这是一个好的做法还是有更好的方法呢？

Answer 1

是的，有一种更好的方法，使用计算值。

一种模式是使用私有变量来保存值和计算值以显示您想要的内容。

使用此模式，您可以实现列表过滤器和各种动态计算，具有很高的灵活性，因为MobX优化了所有计算值。

请记住，要访问计算值，您只需将其作为属性读取，而不是函数。

例如：

// good
store.anotherThing

// bad
store.anotherThing()

class Store {
  @observable
  showSomething = false;

  @observable
  _anotherThing = [];

  @action
  setShowSomething = value => {
    this.showSomething = value;
  };

  @computed get anotherThing() {
    const { showSomething } = this;

    // Update some other stuffs
    if (showSomething) {
      this._anotherThing = [1, 2, 3];
    } else {
      this._anotherThing = [];
    }
  }
}