React-komponentin pakottaminen päivittämään

esittely

Tässä artikkelissa näytämme, kuinka React.js:n komponentti pakotetaan päivittämään. Tarkemmin sanottuna annamme lyhyen esittelyn Reactin uudelleenrenderöijistä, näytämme kuinka pakottaa päivitykset luokkapohjaisiin komponentteihin ja kuinka pakottaa päivitykset toiminnallisiin komponentteihin.

Reagoi uudelleen

React itse käsittelee automaattisesti uudelleen renderöidyt komponentit puolestasi useimmissa tapauksissa. Syy tähän voi perustua siihen, milloin rekvisiitta tai tila on päivitetty. Joten kun tila tai ominaisuus muuttuu, komponentti hahmonnetaan uudelleen. Mutta entä jos komponenttisi on riippuvainen jostain muusta eikä välttämättä valtiostasi tai omaisuudestasi? Siinä tapauksessa saatat joutua pakottamaan komponentin päivittämään, koska React ei ehkä ole havainnut muutosta.

Katsotaanpa, kuinka tätä pakotettua päivitystä käytetään React-komponentissa. Tämän osoittamiseksi aiomme luoda yksinkertaisen sovelluksen esittelytarkoituksiin.

Huomautuksia: Käsittelemme muutamia Reactin käsitteitä, joten perustiedot Reactista on suositeltavaa.

Luokkapohjaisten komponenttien päivitysten pakottaminen

Luokkakomponentissa on sisäänrakennettu menetelmä komponentin hahmontamiseksi uudelleen, ns forceUpdate(), jota käytetään pakottamaan komponentti renderöimään uudelleen. Voit lukea lisää aiheesta forceUpdate() menetelmä Reactissa virallinen nettisivu.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Huomautuksia: Ei ole suositeltavaa luottaa komponenttien päivittämiseen käyttämällä forceUpdate() menetelmä. Kun huomaat tarvitsevasi tätä menetelmää, sinun tulee ensin yrittää analysoida koodisi ja selvittää, onko olemassa jokin muu syy, miksi React ei päivitä komponenttia. Saatat huomata, että virhe aiheuttaa tämän tai että voit järjestää koodisi uudelleen siten, että React voi hahmontaa komponentin uudelleen oikein.

Tässä on esimerkki luokkapohjaisen komponentin päivityksen pakottamisesta:

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

Tässä menetelmässä tapahtuu paljon enemmän kuin miltä näyttää. Esimerkiksi soittamalla forceUpdate() laukaisee myös lapsikomponenttien elinkaarimenetelmät. Ja kuten tiedämme Reactin kanssa, se päivittää DOM:n vain, jos merkintä on todella muuttunut.

Voit käyttää live-koodi täällä.

Toiminnallisten komponenttien päivitysten pakottaminen

Toiminnallisilla komponenteilla ei ole sisäänrakennettua menetelmää komponenttien hahmontamiseksi uudelleen, kuten niiden luokkapohjaisilla vastineilla. Tämä tarkoittaa, että meillä ei ole forceUpdate() käytettävissämme oleva menetelmä. Muista kuitenkin, että Reactissa komponentit tyypillisesti renderöidään uudelleen tilan tai ehdotuksen muutosten vuoksi. Tätä käyttämällä voimme saavuttaa tapoja pakottaa upate.

Vuodesta 16.8+ alkaen Reactissa on konsepti nimeltä Hooks, jota voidaan käyttää toiminnallisissa komponenteissa tilan päivittämiseen, sivuvaikutusten suorittamiseen jne. Käytämme näitä koukkuja hyödyksemme saadaksemme komponentin uudelleen renderöimään.

Tässä on esimerkkejä toiminnallisen osan päivityksen pakottamisesta:

Käyttäen useReducer koukku

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

function handleClick() {
    forceUpdate();
}

Reactissa redustoria käytetään tyypillisesti, kun tilalogiikka ja -toiminnot ovat monimutkaisia. Täällä käytämme sitä yksinkertaisesti käynnistämään päivityksen päivittämällä valetilamuuttujan, x. Tilan on itse asiassa muututtava päivityksen käynnistämiseksi, minkä vuoksi sitä kasvatetaan jokaisella kutsulla.

Käytä useState koukku

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

Tämän tyyppisen voimapäivityksen idea on hyvin samanlainen useReducer siinä, että päivitämme tilaa jatkuvasti pakottaaksemme muutoksen. Laskurin kasvattamisen sijaan, kuten teimme edellisessä menetelmässä, tässä yksinkertaisesti vaihdamme loogisen arvon, jotta se kumotaan jokaisessa kutsussa.

Käyttäen useState ja useCallback koukut

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

Jälleen tämä strategia toimii muuttamalla valtiota. Tässä tapauksessa, vaikka emme teknisesti muuta arvo valtiosta, me olemme lähettää sille uuden objektin, jota React pitää uutena, koska se ei tee "syviä" tasa-arvotarkastuksia tilalle.

Kuten näet, on olemassa useita tapoja saavuttaa sama asia täällä. Muista, että nämä ovat kaikki teknisesti vastakuvioita ja niitä tulee välttää, kun mahdollista. Mutta jos et pysty ratkaisemaan taustalla olevaa ongelmaa ja joudut pakottamaan osan päivittämään, minkä tahansa tässä näyttämämme menetelmän pitäisi toimia.

Yhteenveto

Tässä artikkelissa olemme nähneet kuinka pakottaa React-komponenttien päivitykset. Näimme myös, kuinka tämä voidaan saavuttaa sekä toiminnallisissa että luokkakohtaisissa komponenteissa. Vaikka se ei välttämättä ole hyvä käytäntö, on hyödyllistä ymmärtää, miten se toimii, jos meidän on käytettävä sitä erityistapauksissa.