陷入閉包：理解 React 狀態管理中的怪癖

總長DR

• 閉包就像函數隨身攜帶的背包，包含它們創建時的資料
• React 元件使用閉包來記住它們的狀態和 props
• 當狀態更新無法如預期般運作時，過時的閉包可能會導致錯誤
• 功能更新為使用最新狀態提供了可靠的解決方案

介紹

你有沒有想過為什麼有時你的 React 狀態更新不能正常運作？或者為什麼快速單擊按鈕多次不會按預期更新計數器？答案在於理解閉包以及 React 如何處理狀態更新。在本文中，我們將使用簡單的範例來闡明這些概念，讓一切變得簡單。

什麼是閉包？

將閉包視為一個保留其誕生位置的微小記憶的函數。它就像是創建函數時存在的所有變數的寶麗來快照。讓我們用一個簡單的計數器來看看它的實際效果：

function createPhotoAlbum() {
    let photoCount = 0;  // This is our "snapshot" variable

    function addPhoto() {
        photoCount += 1;  // This function "remembers" photoCount
        console.log(`Photos in album: ${photoCount}`);
    }

    function getPhotoCount() {
        console.log(`Current photos: ${photoCount}`);
    }

    return { addPhoto, getPhotoCount };
}

const myAlbum = createPhotoAlbum();
myAlbum.addPhoto();     // "Photos in album: 1"
myAlbum.addPhoto();     // "Photos in album: 2"
myAlbum.getPhotoCount() // "Current photos: 2"

在此範例中，addPhoto 和 getPhotoCount 函數都會記住 photoCount 變量，即使在 createPhotoAlbum 執行完畢後也是如此。這是一個正在執行的閉包 - 函數會記住它們的出生地！

為什麼閉包在 React 中很重要

在 React 中，閉包在元件如何記住其狀態方面發揮著至關重要的作用。這是一個簡單的計數器組件：

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        // This function closes over 'count'
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{increment}">Add One</button>
        </div>
    );
}

increment 函數在 count 狀態變數周圍形成一個閉包。這就是它在單擊按鈕時“記住”要添加到哪個數字的方式。

問題：過時的閉包

這就是事情變得有趣的地方。讓我們建立一個關閉可能導致意外行為的情況：

function BuggyCounter() {
    const [count, setCount] = useState(0);

    const incrementThreeTimes = () => {
        // All these updates see the same 'count' value!
        setCount(count + 1);  // count is 0
        setCount(count + 1);  // count is still 0
        setCount(count + 1);  // count is still 0!
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{incrementThreeTimes}">Add Three</button>
        </div>
    );
}

如果您按一下此按鈕，您可能會預期計數會增加 3。但令人驚訝的是！它只增加了 1。這是因為「過時的閉包」——我們的函數在創建時一直在查看 count 的原始值。

可以將其想像為拍攝三張顯示數字 0 的白板照片，然後嘗試為每張照片添加 1。每張照片中仍然有 0！

解決方案：功能更新

React 為這個問題提供了一個優雅的解決方案—功能更新：

function FixedCounter() {
    const [count, setCount] = useState(0);

    const incrementThreeTimes = () => {
        // Each update builds on the previous one
        setCount(current => current + 1);  // 0 -> 1
        setCount(current => current + 1);  // 1 -> 2
        setCount(current => current + 1);  // 2 -> 3
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{incrementThreeTimes}">Add Three</button>
        </div>
    );
}

我們不再使用閉包中的值，而是告訴 React「取得目前值並加一」。這就像有一個樂於助人的助手，在添加之前總是先查看白板上的當前數字！

現實世界範例：社群媒體讚按鈕

讓我們看看這如何應用於現實場景 - 社群媒體貼文的讚按鈕：

function createPhotoAlbum() {
    let photoCount = 0;  // This is our "snapshot" variable

    function addPhoto() {
        photoCount += 1;  // This function "remembers" photoCount
        console.log(`Photos in album: ${photoCount}`);
    }

    function getPhotoCount() {
        console.log(`Current photos: ${photoCount}`);
    }

    return { addPhoto, getPhotoCount };
}

const myAlbum = createPhotoAlbum();
myAlbum.addPhoto();     // "Photos in album: 1"
myAlbum.addPhoto();     // "Photos in album: 2"
myAlbum.getPhotoCount() // "Current photos: 2"

結論

重點

1. 閉包是記住變數創建位置的函數 - 就像具有記憶功能的函數一樣。
2. 過時閉包當你的函數使用記憶體中的過時值而不是當前值時就會發生。
3. React 中的功能更新 (setCount(count => count 1)) 確保您始終使用最新狀態。

記住：當根據先前的值更新狀態時，更喜歡功能更新。這就像有一個可靠的助手，在進行更改之前總是檢查當前值，而不是憑記憶工作！

最佳實踐

• 當新狀態依賴先前狀態時使用功能更新
• 要特別小心非同步操作和事件處理程序中的閉包
• 如有疑問，console.log 您的值以檢查是否有過時的閉包
• 考慮使用 React DevTools 來除錯狀態更新

掌握了這些概念，您就可以像專業人士一樣處理 React 中的狀態更新！快樂編碼！ ？

以上是陷入閉包：理解 React 狀態管理中的怪癖的詳細內容。更多資訊請關注PHP中文網其他相關文章！