Question

我想念mobx observables和反应。我准备了两个例子，其中一个是有效的，另一个没有，我不明白为什么。

示例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中发送可观察变量并在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包装到另一个可观察对象中。 Alert2反应有效。

同样，如果我们将Alert1和Alert2组件的反应移动到Main组件的构造函数，两个反应都会起作用。

以下两个组件https://jsfiddle.net/kasheftin/zex0qjvf/1/

的jsfiddle示例

Answer 1

参见https://mobxjs.github.io/mobx/best/react.html，在你的第一个例子中，你没有传递一个observable，只是一个普通的布尔值（true或false），所以没有任何反应反应。在javascript中，所有值都是不可变的，因此每个定义都是可观察的。属性是可观察的。

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

请注意，创建boxed可观察对象也可以，因为这些可以作为头等公民传递。例如：v1 = observable(false)和reaction(() => this.props.v1.get(), ...

如何在子组件中进行简单的mobx反应工作

1 个答案: