對react中setState的總結

ubbcou發表於2019-03-20
React

setState 如何工作：

正常來說：每次呼叫 setState 修改屬性後，都會觸發重新渲染元件。

而重新渲染元件的方法則是一個 updater 方法。這個方法會在React Dom/React Dom Server/React Native 建立類的例項之後立即設定。這也是，不同環境下使用setState都產生一致效果的原因。

而不正常的請情況下，比如同一個方法內，多次呼叫 setState ，它們只會觸發一次 re-render。但是同一個方法的非同步呼叫 setState 則會呼叫同setState次數的 re-render (updater)：

// 同步呼叫
onClick = () => {
    let { count } = this.state;
    
    this.setState({
        count: ++count
    });
    
    this.setState({
        count: ++count
    });
} // re-render 次數：1

// 非同步呼叫
onClickAsync = () => {
    let { count } = this.state;
    
    this.setState({
        count: ++count
    });
    
    setTimeout(() => {
        this.setState({
            count: ++count
        });
    }, 0);
} // re-render 次數：2
複製程式碼

而在 render 方法或者 componentWillUpdate / componentDidUpdate 內部呼叫了 setState，因為 setState會觸發重新渲染元件，因此會出現迴圈呼叫的情況。此時React會丟擲錯誤Maximum update depth exceeded.，超出最大更新深度，這是因為React限制了巢狀更新的數量以防止無限迴圈。

有總結才有收穫。

相關文章