Unterschied, wenn die beobachtbare Variable innerhalb der Aktionsmethode und der einfachen Funktion in mobx aktualisiert wird?

Question

Ich verwende MBOX für die staatliche Verwaltung in ReactJS.

ich irgendwann beobachtbare Variable innerhalb einiger Funktion, als auch es re-render die react-Komponente und irgendwann verwende ich @action Methode, um die beobachtbare Variable zu aktualisieren.

Also was ist der Unterschied zwischen den beiden Szenarien und wie wird es beim Rendern auswirken?

Answer 1

Eine action ist auch eine transaction, was bedeutet, dass jeder Wert, der von den Observablen abgeleitet wird, die Sie in der Aktion ändern, neu berechnet wird, nachdem die action beendet ist. Wenn Sie die Funktion nicht in eine action umbrechen, können abgeleitete Werte mehrfach berechnet werden.

Beispiel - Nachberechnung nach Aktion (JS Bin)

@observer 
class App extends Component { 
    @observable x = 'a'; 
    @observable y = 'b'; 
    @computed get z() { 
    console.log('computing z...'); 
    return `${this.x} ${this.y}`; 
    } 

    onClick = action(() => { 
    this.x = 'c'; 
    this.y = 'd'; 
    }); 

    render() { 
    return <div onClick={this.onClick}> {this.z} </div>; 
    } 
} 

Beispiel - Nachrechnung sofort (JS Bin)

@observer 
class App extends Component { 
    @observable x = 'a'; 
    @observable y = 'b'; 
    @computed get z() { 
    console.log('computing z...'); 
    return `${this.x} ${this.y}`; 
    } 

    onClick =() => { 
    this.x = 'c'; 
    this.y = 'd'; 
    }; 

    render() { 
    return <div onClick={this.onClick}> {this.z} </div>; 
    } 
}