Terperangkap dalam Penutupan: Memahami Keanehan dalam Pengurusan Negeri React

TLDR

• Penutupan adalah seperti beg galas yang berfungsi dibawa ke mana-mana, mengandungi data dari semasa ia dicipta
• Komponen bertindak balas menggunakan penutupan untuk mengingati keadaan dan prop mereka
• Penutupan lapuk boleh membawa kepada pepijat apabila kemas kini keadaan tidak berfungsi seperti yang diharapkan
• Kemas kini berfungsi menyediakan penyelesaian yang boleh dipercayai untuk bekerja dengan keadaan terkini

pengenalan

Pernahkah anda terfikir mengapa kadangkala kemas kini keadaan React anda tidak berfungsi dengan betul? Atau mengapa mengklik butang beberapa kali dengan cepat tidak mengemas kini kaunter seperti yang dijangkakan? Jawapannya terletak pada pemahaman penutupan dan cara React mengendalikan kemas kini keadaan. Dalam artikel ini, kami akan merungkai konsep ini menggunakan contoh mudah yang akan membuatkan semuanya klik.

Apakah Penutupan?

Fikirkan penutupan sebagai fungsi yang menyimpan ingatan kecil di mana ia dilahirkan. Ia seperti gambar polaroid semua pembolehubah yang wujud semasa fungsi itu dicipta. Mari lihat tindakan ini dengan kaunter mudah:

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"

Dalam contoh ini, kedua-dua fungsi addPhoto dan getPhotoCount mengingati pembolehubah photoCount, walaupun selepas createPhotoAlbum telah selesai melaksanakan. Ini adalah penutupan dalam tindakan - berfungsi untuk mengingati tempat kelahiran mereka!

Mengapa Penutupan Penting dalam Reaksi

Dalam React, penutupan memainkan peranan penting dalam cara komponen mengingati keadaannya. Berikut ialah komponen pembilang mudah:

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>
    );
}

Fungsi kenaikan membentuk penutupan sekitar pembolehubah keadaan kiraan. Beginilah cara ia "mengingat" nombor yang hendak ditambah apabila butang diklik.

Masalahnya: Penutupan Lapuk

Di sinilah perkara menjadi menarik. Mari wujudkan situasi di mana penutupan boleh menyebabkan tingkah laku yang tidak dijangka:

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>
    );
}

Jika anda mengklik butang ini, anda mungkin menjangkakan kiraan akan meningkat sebanyak 3. Tetapi mengejutkan! Ia hanya meningkat sebanyak 1. Ini kerana "penutupan basi" - fungsi kami tersekat melihat nilai asal kiraan apabila ia dibuat.

Fikirkan ia seperti mengambil tiga foto papan putih yang menunjukkan nombor 0, kemudian cuba menambah 1 pada setiap foto. Anda masih mempunyai 0 dalam setiap foto!

Penyelesaian: Kemas Kini Berfungsi

React menyediakan penyelesaian yang elegan untuk masalah ini - kemas kini berfungsi:

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>
    );
}

Daripada menggunakan nilai daripada penutupan kami, kami kini memberitahu React "ambil apa sahaja nilai semasa dan tambah satu padanya." Ia seperti mempunyai pembantu yang membantu yang sentiasa melihat nombor semasa di papan putih sebelum menambahnya!

Contoh Dunia Nyata: Butang Suka Media Sosial

Mari kita lihat cara ini digunakan pada senario dunia sebenar - butang suka siaran media sosial:

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"

Kesimpulan

Pengambilan Utama

1. Penutupan ialah fungsi yang mengingati pembolehubah dari mana ia dicipta - seperti fungsi dengan ingatan.
2. Penutupan basi berlaku apabila fungsi anda menggunakan nilai lapuk daripada ingatannya dan bukannya nilai semasa.
3. Kemas kini fungsional dalam React (setCount(count => count 1)) pastikan anda sentiasa bekerja dengan keadaan terkini.

Ingat: Apabila mengemas kini keadaan berdasarkan nilai sebelumnya, pilih kemas kini berfungsi. Ia seperti mempunyai pembantu yang boleh dipercayai yang sentiasa menyemak nilai semasa sebelum membuat perubahan, dan bukannya bekerja dari ingatan!

Amalan Terbaik

• Gunakan kemas kini berfungsi apabila keadaan baharu bergantung pada keadaan sebelumnya
• Berhati-hati terutamanya dengan penutupan dalam operasi async dan pengendali acara
• Apabila ragu-ragu, console.log nilai anda untuk menyemak penutupan lapuk
• Pertimbangkan untuk menggunakan React DevTools untuk menyahpepijat kemas kini keadaan

Dengan konsep ini di bawah tali pinggang anda, anda serba lengkap untuk mengendalikan kemas kini keadaan dalam React seperti profesional! Selamat mengekod! ?

Atas ialah kandungan terperinci Terperangkap dalam Penutupan: Memahami Keanehan dalam Pengurusan Negeri React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!