差异，当可观察变量更新内部的动作方法和普通函数在mobx？

Question

我正在使用MBOX进行状态管理ReactJS。

我有时更新一些函数内的可观察变量，比它重新呈现反应组件，有时我用@action方法来更新可观察变量。

那么这两种情况之间的差别以及它对渲染的影响是什么？

Answer 1

action也是transaction，这意味着在动作完成后，将重新计算您在动作中更改的可观察值的任何值。如果您不包装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>; 
    } 
} 

实施例 - 重新计算直线距离（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>; 
    } 
}