Kako prisilno posodobiti komponento React

Predstavitev

V tem članku vam bomo pokazali, kako prisilno posodobiti komponento v React.js. Natančneje, podali bomo kratek uvod v ponovno upodabljanje React, pokazali bomo, kako vsiliti posodobitve v komponentah, ki temeljijo na razredu, in kako vsiliti posodobitve v funkcionalnih komponentah.

React Re-Renders

V večini primerov React sam samodejno obravnava komponente za ponovno upodabljanje. Vzrok za to lahko temelji na tem, kdaj so bili rekviziti ali stanje posodobljeni. Torej, ko se stanje ali lastnost spremeni, se komponenta ponovno upodobi. Kaj pa, če je vaša komponenta odvisna od nečesa drugega in ne nujno od vašega stanja ali lastnine? V tem primeru boste morda morali prisilno posodobiti komponento, ker React morda ni zaznal spremembe.

Oglejmo si, kako uporabiti to vsiljeno posodobitev komponente React. Da bi to pokazali, bomo ustvarili preprosto aplikacijo za predstavitvene namene.

Opombe: Pokrivali bomo nekaj konceptov Reacta, zato je priporočljivo imeti osnovno znanje o Reactu.

Vsiljevanje posodobitev komponent, ki temeljijo na razredu

Komponenta razreda ima vgrajeno metodo za ponovno upodabljanje komponente, imenovano forceUpdate(), ki se uporablja za prisilno ponovno upodobitev komponente. Več o forceUpdate() metoda na React's uradna spletna stran.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Opombe: Ni priporočljivo, da se zanašate na posodabljanje komponent z uporabo forceUpdate() metoda. Ko ugotovite, da potrebujete to metodo, morate najprej poskusiti analizirati svojo kodo in ugotoviti, ali obstaja drug razlog, zakaj React ne posodablja komponente. Morda boste ugotovili, da to povzroča napaka ali da lahko prestrukturirate svojo kodo na način, ki omogoča Reactu, da sam pravilno ponovno upodobi komponento.

Tukaj je primer, kako vsiliti posodobitev komponente, ki temelji na razredu:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

Znotraj te metode se dogaja veliko več, kot se morda zdi. Na primer klicanje forceUpdate() sproži metode življenjskega cikla tudi za podrejene komponente. In kot vemo pri Reactu, bo posodobil DOM le, če se je oznaka dejansko spremenila.

Do nje lahko dostopate koda v živo tukaj.

Vsiljevanje posodobitev funkcionalnih komponent

Funkcionalne komponente nimajo vgrajene metode za ponovno upodabljanje komponent, kot to počnejo njihovi primerki, ki temeljijo na razredu. To pomeni, da nimamo forceUpdate() način, ki nam je na voljo. Vendar se spomnite, da se komponente v Reactu običajno ponovno upodobijo zaradi sprememb stanja ali prop. S tem lahko dosežemo načine za prisilno posodobitev.

Od različice 16.8+ naprej ima React koncept, imenovan Hooks, ki ga je mogoče uporabiti v funkcionalnih komponentah za posodabljanje stanja, izvajanje stranskih učinkov itd. Te kljuke bomo uporabili v našo korist, da bomo komponento znova upodabljali.

Tukaj je nekaj primerov, kako vsiliti posodobitev v funkcionalni komponenti:

Uporaba useReducer kljuka

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

Reduktor v Reactu se običajno uporablja, ko imate zapleteno logiko stanja in dejanja. Tukaj ga uporabljamo preprosto za sprožitev posodobitve s posodobitvijo navidezne spremenljivke stanja, x. Stanje se mora dejansko spremeniti, da se sproži posodobitev, zato se poveča ob vsakem klicu.

Uporaba useState kljuka

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Ideja te vrste vsiljene posodobitve je zelo podobna useReducer v tem, da nenehno posodabljamo stanje, da izsilimo spremembo. Namesto povečanja števca, kot smo to storili pri zadnji metodi, tukaj preprosto preklopimo logično vrednost, tako da je negirana pri vsakem klicu.

Uporaba useState in useCallback kljuke

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

Tudi ta strategija deluje tako, da spremeni stanje. V tem primeru, čeprav tehnično ne spreminjamo vrednost države, mi so pošiljanje novega predmeta, ki ga React šteje za novega, saj ne izvaja »globokih« preverjanj enakosti stanja.

Kot lahko vidite, obstaja več načinov, kako doseči isto. Upoštevajte, da so to vsi tehnično anti-vzorci in se jim morate izogibati, kadar je to mogoče. Če pa ne morete rešiti osnovne težave in morate prisilno posodobiti komponento, bi morala delovati katera koli od metod, ki smo jih prikazali tukaj.

zaključek

V tem članku smo videli, kako vsiliti posodobitve komponent React. Videli smo tudi, kako je to mogoče doseči v funkcionalnih in razrednih komponentah. Čeprav ni nujno dobra praksa, je koristno razumeti, kako deluje, če ga moramo uporabiti v posebnih primerih.