Question

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

// 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>
    );
  }
}

这是我发现的实现方式，所有逻辑都在商店中，我在主要组件的 componentDidMount 中使用了 autorun 商店的 showSomething 变量与道具相同。我的疑问是，这是否是一种好的做法，或者是否有更好的方法呢？

Answer 1

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

一种模式是使用 private 变量保存值，并使用计算出的值来显示所需的内容。

使用这种模式，由于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 = [];
    }
  }
}

当React道具改变时Mobx商店会更新

1 个答案: