Différence, quand la variable observable est mise à jour dans la méthode d'action et la fonction normale dans mobx?

Question

J'utilise BTE pour la gestion de l'État dans ReactJS.

Je mets parfois à jour une variable observable à l'intérieur d'une fonction, que je répète le composant de réaction et j'utilise parfois la méthode @action pour mettre à jour la variable observable.

Alors, quelle est la différence entre les deux scénarios et quel effet il aura sur le rendu?

Answer 1

Un action est également transaction, ce qui signifie que toute valeur dérivée des observables que vous modifiez dans l'action sera recalculée après la fin du action. Si vous n'emballez pas la fonction dans un action, les valeurs dérivées peuvent être calculées plusieurs fois.

Exemple - Recalcul après l'action (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>; 
    } 
} 

Exemple - Recalcul de suite (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>; 
    } 
}