1

我错过了 mobx 可观察和反应中的一些东西。我准备了两个示例，其中一个有效，另一个无效，我不明白为什么。

示例 1（不起作用）：

@observer class Alert1 extends Component {
  constructor(props) {
    super(props);
    this.r2 = reaction(
      () => this.props.v1,
      v => console.log("Alert1 reaction trigger",v)
    );
  }
  render() {
    return null;
  }
}

@observer class Main extends Component {
  @observable v1 = false;
  render() {
    return (
      <div>
        <Alert1 v1={this.v1} />
        <button onClick={e=>this.v1=!this.v1}>Switch</button>
      </div>
    );
  }
}

在示例 1 中，我们只是在 props 中发送 observable 变量并在 Alert1 组件中创建反应，但它不会触发。

示例 2（作品）：

@observer class Alert2 extends Component {
  constructor(props) {
    super(props);
    this.r2 = reaction(
      () => this.props.someObj.v1,
      v => console.log("Alert2 reaction trigger",v)
    );
  }
  render() {
    return null;
  }
}

@observer class Main extends Component {
  constructor(props) {
    this.someObj = observable({v1:observable(false)});
  }
  render() {
    return (
      <div>
        <Alert2 someObj={this.someObj} />
        <button onClick={e=>this.someObj.v1=!this.someObj.v1}>Switch</button>
      </div>
    );
  }
}

这与示例 1 几乎相同，但我们将 v1 observable 包装到另一个 observable 中。Alert2 反应有效。

同时，如果我们将反应从 Alert1 和 Alert2 组件移动到 Main 组件的构造函数，这两个反应都有效。

这是两个组件的 jsfiddle 示例，https: //jsfiddle.net/kasheftin/zex0qjvf/1/

4

1 回答 1

2

请参阅https://mobxjs.github.io/mobx/best/react.html，在您的第一个示例中，您没有传递一个可观察对象，而只是一个普通的布尔值（true或false），因此没有任何反应反应。在 javascript 中，所有值都是不可变的，因此根据定义，某些东西是可观察的。它是可观察到的属性。

在第二个示例中，您传递了一个具有可观察属性的对象，因此这是可以做出反应的东西。

请注意，创建盒装observable 也可以，因为它们可以作为一等公民传递。例如：v1 = observable(false)和reaction(() => this.props.v1.get(), ...

于 2016-10-26T10:33:01.963 回答