差異，當可觀察變量更新內部的動作方法和普通函數在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>; 
    } 
}