Apakah kegunaan forceupdate in react

Sebagai tindak balas, forceupdate() digunakan untuk memaksa komponen melangkau shouldComponentUpdate() dan terus memanggil render(), yang boleh mencetuskan kaedah kitaran hayat biasa komponen Sintaksnya ialah "component.forceUpdate(. panggil balik)".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah penggunaan forceupdate dalam react

Komponen dalam React akan dipaparkan semula hanya apabila keadaannya atau prop yang dihantar kepadanya berubah, tetapi jika sesetengah data Berubah, jika kita perlu ubah pemaparan semula komponen, kemudian kami akan menggunakan kaedah forceUpdate() React. Memanggil forceUpdate() akan memaksa komponen untuk membuat semula, sekali gus melangkau kaedah shouldComponentUpdate() dan memanggil kaedah render() komponen.

Petua: Secara umum, elakkan menggunakan forceUpdate() dan hanya baca daripada this.props dan this.state dalam render().

Penggunaan:

component.forceUpdate(callback)

Walaupun memang terdapat beberapa kes penggunaan untuk menggunakan kaedah forceUpdate(), adalah lebih baik untuk menggunakan cangkuk, prop, keadaan dan konteks untuk memaparkan semula komponen apabila perlu berurusan dengan.

Secara lalai, komponen akan dipaparkan semula apabila keadaan atau prop mereka berubah. Jika kaedah render() anda bergantung pada beberapa data lain, anda boleh memberitahu komponen React bahawa ia perlu membuat semula dengan memanggil forceUpdate().

Memanggil forceUpdate() akan menyebabkan komponen melangkau shouldComponentUpdate() dan memanggil render() secara langsung. Ini akan mencetuskan kaedah kitaran hayat biasa komponen, termasuk kaedah shouldComponentUpdate() bagi setiap komponen anak.

forceUpdate adalah untuk memaparkan semula. Sesetengah pembolehubah tidak berada dalam keadaan dan anda ingin memuat semula pemaparan apabila pembolehubah dikemas kini atau pembolehubah dalam keadaan terlalu dalam dan pemaparan tidak dicetuskan secara automatik apabila dikemas kini. Pada masa ini, anda boleh memanggil forceUpdate secara manual untuk mencetuskan pemaparan secara automatik

Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}</div>);
    }
}
App.js
class App extends React.Component{
    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah kegunaan forceupdate in react. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!