為什麼 React 的 setState 看起來是異步的，如何確保更新後的狀態立即反映出來？

React 中的延遲狀態更新：了解非同步 setState

使用 React 元件時，了解 setState 方法的本質至關重要。與狀態更新立即發生的命令式程式設計相反，React 的 setState 是異步的。這意味著更新狀態並不能保證立即反映組件的內部狀態。

相關案例：延遲BoardAdd 模態顯示標誌

考慮以下程式碼在React 中實作BoardAdd 元件的程式碼片段：

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

當openAddBoardModal 方法為呼叫時，它將boardAddModalShow 標誌設為true並將其值列印到控制台。然而，控制台輸出顯示，儘管呼叫了 setState，該值仍然為 false。

為什麼？

setState 是非同步的。呼叫後，UI 保持不受影響，直到 React 安排重新渲染。 console.log 語句在重新渲染發生之前執行，導致列印過時的狀態值。

解：使用回呼

要解決此問題，我們可以使用回呼函數作為 setState 的參數。回呼在狀態更新並發生重新渲染後執行：

openAddBoardModal() {
    this.setState({ boardAddModalShow: true }, function () {
        console.log(this.state.boardAddModalShow);
    });
}

在這種情況下，console.log 語句將在狀態更新後執行，正確顯示新的狀態boardAddModalShow 的值為 true。

為什麼要讓 setState 非同步？

這種非同步性質setState 的作用是提高效能。由於狀態更新會觸發重新渲染，因此使它們同步可能會導致瀏覽器無回應。批次 setState 呼叫透過最大限度地減少不必要的重新渲染並增強使用者體驗來提高效能。

以上是為什麼 React 的 setState 看起來是異步的，如何確保更新後的狀態立即反映出來？的詳細內容。更多資訊請關注PHP中文網其他相關文章！