Mengapa `setState` React Kelihatan Asynchronous, dan Bagaimana Saya Boleh Memastikan Keadaan Yang Dikemas Kini Dicerminkan Serta-merta?

Kemas Kini Keadaan Tertunda dalam React: Memahami Asynchronous setState

Apabila bekerja dengan komponen React, adalah penting untuk memahami sifat kaedah setState. Berbeza dengan pengaturcaraan imperatif, di mana kemas kini keadaan berlaku serta-merta, setState React adalah tak segerak. Ini bermakna mengemas kini keadaan tidak menjamin pantulan serta-merta dalam keadaan dalaman komponen.

Kes yang dipersoalkan: Papan TertundaAdd Modal Show Flag

Pertimbangkan kod berikut coretan yang melaksanakan komponen BoardAdd dalam React:

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

Apabila kaedah openAddBoardModal digunakan, ia menetapkan bendera boardAddModalShow kepada benar dan mencetak nilainya ke konsol. Walau bagaimanapun, output konsol menunjukkan bahawa nilai kekal palsu walaupun panggilan setState.

Mengapa?

setState adalah tak segerak. Selepas ia dipanggil, UI kekal tidak terjejas sehingga React menjadualkan pemaparan semula. Pernyataan console.log dilaksanakan sebelum pemaparan semula berlaku, menyebabkan nilai keadaan lapuk dicetak.

Penyelesaian: Menggunakan Panggilan Balik

Untuk menyelesaikan isu ini, kita boleh menggunakan fungsi panggil balik sebagai hujah untuk setState. Panggilan balik dilaksanakan selepas keadaan dikemas kini dan pemaparan semula telah berlaku:

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

Dalam kes ini, pernyataan console.log akan dilaksanakan selepas keadaan dikemas kini, menunjukkan yang baharu dengan betul nilai boardAddModalShow sebagai benar.

Mengapa Jadikan setState Asynchronous?

Sifat tak segerak setState ini berfungsi untuk tujuan meningkatkan prestasi. Memandangkan kemas kini keadaan mencetuskan pemaparan semula, menjadikannya segerak boleh menyebabkan penyemak imbas tidak bertindak balas. Batching setState panggilan meningkatkan prestasi dengan meminimumkan pemaparan semula yang tidak perlu dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Mengapa `setState` React Kelihatan Asynchronous, dan Bagaimana Saya Boleh Memastikan Keadaan Yang Dikemas Kini Dicerminkan Serta-merta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!