1

mobx のオブザーバブルとリアクションに欠けているものがあります。2 つの例を用意しました。1 つは機能し、もう 1 つは機能しません。理由がわかりません。

例 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 オブザーバブルを他のオブザーバブルにラップします。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では、すべての値は不変であるため、定義ごとに観察可能なものです。それは観察可能な特性です。

2 番目の例では、監視可能なプロパティを持つオブジェクトを渡します。これは、反応できるものです。

ボックス化されたオブザーバブルの作成も機能することに注意してください。これらはファーストクラスの市民として渡される可能性があるためです。例:v1 = observable(false)とreaction(() => this.props.v1.get(), ...

于 2016-10-26T10:33:01.963 に答える