Wie man einfache Mobx-Reaktion in Sub-Komponente

Question

machen Ich vermisse etwas in Mobx Observablen und Reaktionen. Ich bereitete zwei Beispiele vor, einer von ihnen funktioniert, der andere nicht, ich verstehe nicht warum.

Beispiel 1 (nicht funktioniert):

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

In Beispiel 1 wir in Requisiten nur beobachtbaren Variablen senden und erstellen Reaktion in alert 1 Komponente, aber es löst nicht.

Beispiel 2 (Werke):

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

, die als Beispiel 1 fast gleich ist, aber wir v1 beobachtbaren in den anderen beobachtbaren wickeln. Alert2-Reaktion funktioniert.

Die gleiche Zeit, wenn wir Reaktionen von Alert1 und Alert2-Komponenten auf den Konstruktor der Hauptkomponente verschieben, funktionieren beide Reaktionen.

Hier jsfiddle Beispiel mit beiden Komponenten, https://jsfiddle.net/kasheftin/zex0qjvf/1/

Answer 1

Siehe https://mobxjs.github.io/mobx/best/react.html, in Ihrem ersten Beispiel, Sie sind eine beobachtbare um nicht vorbei, sondern nur einen einfachen Boolesche Wert (true oder false), so gibt es nichts für die Reaktion zu reagieren. In Javascript sind alle Werte unveränderlich, also per Definition etwas, das beobachtbar ist. Es sind die Eigenschaften, die beobachtbar sind. Im zweiten Beispiel übergeben Sie ein Objekt mit einer beobachtbaren Eigenschaft, so dass auf etwas reagiert werden kann.

Beachten Sie, dass das Erstellen einer boxed Observable auch funktionieren würde, da diese als erstklassige Bürger weitergegeben werden können. Zum Beispiel: v1 = observable(false) und reaction(() => this.props.v1.get(), ...