Hvordan tvinge oppdatering av en React-komponent

Introduksjon

I denne artikkelen viser vi deg hvordan du tvinger oppdatering av en komponent i React.js. Mer spesifikt vil vi gi en kort introduksjon til React-gjengjengivelser, vi vil vise hvordan man tvinger oppdateringer i klassebaserte komponenter, og hvordan man tvinger oppdateringer i funksjonelle komponenter.

Reager Re-renders

React selv håndterer automatisk gjengivelse av komponenter for deg, i de fleste tilfeller. Årsaken til dette kan være basert på når rekvisitter eller tilstand har blitt oppdatert. Så når en tilstand eller eiendom endres, gjengis komponenten på nytt. Men hva om komponenten din er avhengig av noe annet og ikke nødvendigvis av staten eller eiendommen din? I så fall må du kanskje tvinge oppdatering av komponenten siden React kanskje ikke har oppdaget endringen.

La oss ta en titt på hvordan du bruker denne tvungne oppdateringen på en React-komponent. For å vise dette skal vi lage en enkel applikasjon for demoformål.

Merknader: Vi vil dekke noen få konsepter av React, så det er tilrådelig å ha grunnleggende kunnskap om React.

Tvinge oppdateringer på klassebaserte komponenter

Klassekomponenten har en innebygd metode for å gjengi en komponent, kalt forceUpdate(), som brukes til å tvinge en komponent til å gjengi. Du kan lese mer om forceUpdate() metode på Reacts offesiell nettside.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Merknader: Det er ikke tilrådelig å stole på å oppdatere komponenter ved hjelp av forceUpdate() metode. Når du finner at du trenger denne metoden, bør du først prøve å analysere koden din og finne ut om det er en annen grunn til at React ikke oppdaterer komponenten. Du kan finne ut at en feil forårsaker dette, eller at du kan omstrukturere koden din på en måte som gjør at React kan gjengi komponenten på nytt på egen hånd.

Her er et eksempel på hvordan du tvinger en oppdatering på en klassebasert komponent:

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

Det skjer mye mer innenfor denne metoden enn det kan virke. For eksempel å ringe forceUpdate() utløser livssyklusmetodene for barnekomponentene også. Og som vi vet med React, vil den oppdatere DOM bare hvis markeringen faktisk har endret seg.

Du kan få tilgang til live kode her.

Tvinge oppdateringer på funksjonelle komponenter

Funksjonelle komponenter har ingen innebygd metode for å gjengi komponenter slik deres klassebaserte motparter gjør. Dette betyr at vi ikke har forceUpdate() metode tilgjengelig for oss. Husk imidlertid at komponenter i React vanligvis gjengis på nytt på grunn av endringer i tilstand eller propeller. Ved å bruke dette kan vi oppnå måter å tvinge upate på.

Fra og med v16.8+ har React et konsept kalt Hooks som kan brukes i funksjonelle komponenter for å oppdatere tilstand, utføre bivirkninger osv. Vi vil bruke disse krokene til vår fordel for å få en komponent til å gjengi.

Her er noen eksempler på hvordan du tvinger en oppdatering i en funksjonell komponent:

Bruke useReducer krok

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

function handleClick() {
    forceUpdate();
}

En redusering i React brukes vanligvis når du har kompleks tilstandslogikk og handlinger. Her bruker vi det ganske enkelt for å utløse oppdateringen ved å oppdatere en dummy-tilstandsvariabel, x. Tilstanden må faktisk endres for å utløse oppdateringen, og det er grunnen til at den økes for hver samtale.

Bruke useState krok

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

Ideen bak denne typen kraftoppdatering er veldig lik useReducer ved at vi hele tiden oppdaterer tilstanden for å tvinge frem endringen. I stedet for å øke en teller, som vi gjorde i den siste metoden, veksler vi her ganske enkelt en boolsk verdi slik at den blir negert ved hver samtale.

Bruke useState og useCallback kroker

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

Igjen fungerer denne strategien ved å endre staten. I dette tilfellet, selv om vi ikke teknisk sett endrer verdi av staten, vi er sende det et nytt objekt, som anses som nytt av React siden det ikke utfører "dyp" likestillingskontroller av staten.

Som du kan se, er det flere måter å oppnå det samme her. Husk at alle disse er teknisk anti-mønstre og bør unngås når det er mulig. Men hvis du ikke klarer å løse det underliggende problemet og trenger å tvinge oppdatering av en komponent, bør alle metodene vi har vist her fungere.

konklusjonen

I denne artikkelen har vi sett hvordan du tvinger oppdateringer på React-komponenter. Vi så også hvordan dette kan oppnås i både funksjonelle og klassebaserte komponenter. Selv om det ikke nødvendigvis er god praksis, er det nyttig å forstå hvordan det fungerer i tilfelle vi trenger å bruke det i spesielle tilfeller.