Hur man tvingar uppdatera en React-komponent

Beskrivning

I den här artikeln visar vi hur du tvingar fram uppdatering av en komponent i React.js. Mer specifikt kommer vi att ge en kort introduktion till React-återrenderingar, vi kommer att visa hur man tvingar fram uppdateringar i klassbaserade komponenter och hur man tvingar fram uppdateringar i funktionella komponenter.

Reager Re-renders

React själv hanterar automatiskt omrenderingskomponenter åt dig, i de flesta fall. Orsaken till detta kan bero på när rekvisita eller tillstånd har uppdaterats. Så när ett tillstånd eller en egenskap ändras, återrenderas komponenten. Men vad händer om din komponent är beroende av något annat och inte nödvändigtvis av din stat eller egendom? I så fall kan du behöva tvinga uppdateringen av komponenten eftersom React kanske inte har upptäckt ändringen.

Låt oss ta en titt på hur man använder den här påtvingade uppdateringen på en React-komponent. För att visa detta kommer vi att skapa en enkel applikation för demoändamål.

Anmärkningar: Vi kommer att täcka några begrepp av React, så att ha grundläggande kunskaper om React är tillrådligt.

Framtvinga uppdateringar av klassbaserade komponenter

Klasskomponenten har en inbyggd metod för att återrendera en komponent, kallad forceUpdate(), som används för att tvinga en komponent att återrenderas. Du kan läsa mer om forceUpdate() metod på Reacts officiell hemsida.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Anmärkningar: Det är inte tillrådligt att förlita sig på att uppdatera komponenter med hjälp av forceUpdate() metod. När du kommer på att du behöver den här metoden bör du först försöka analysera din kod och ta reda på om det finns en annan anledning till att React inte uppdaterar komponenten. Du kanske upptäcker att en bugg orsakar detta eller att du kan omstrukturera din kod på ett sätt som gör att React kan återrendera komponenten på egen hand.

Här är ett exempel på hur man tvingar fram en uppdatering på en klassbaserad 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 händer mycket mer inom denna metod än det kan tyckas. Till exempel att ringa forceUpdate() utlöser livscykelmetoderna för de underordnade komponenterna också. Och som vi vet med React kommer den att uppdatera DOM endast om uppmärkningen faktiskt har ändrats.

Du kan komma åt livekod här.

Framtvinga uppdateringar av funktionella komponenter

Funktionella komponenter har ingen inbyggd metod för att återrendera komponenter som deras klassbaserade motsvarigheter gör. Det betyder att vi inte har forceUpdate() metod tillgänglig för oss. Kom dock ihåg att komponenter i React vanligtvis återrenderas på grund av tillstånds- eller rekvisitaändringar. Med hjälp av detta kan vi åstadkomma sätt att tvinga fram upate.

Från och med v16.8+ har React ett koncept som heter Hooks som kan användas i funktionella komponenter för att uppdatera tillstånd, utföra biverkningar, etc. Vi kommer att använda dessa krokar till vår fördel för att få en komponent att återrendera.

Här är några exempel på hur man tvingar fram en uppdatering i en funktionell komponent:

Använda useReducer krok

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

function handleClick() {
    forceUpdate();
}

En reducering i React används vanligtvis när du har komplex tillståndslogik och åtgärder. Här använder vi det helt enkelt för att trigga uppdateringen genom att uppdatera en dummy-tillståndsvariabel, x. Statusen måste faktiskt ändras för att utlösa uppdateringen, vilket är anledningen till att den ökas vid varje samtal.

Använd 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>
    );
}

Tanken bakom denna typ av kraftuppdatering är väldigt lik useReducer genom att vi ständigt uppdaterar tillstånd för att tvinga fram förändringen. Istället för att öka en räknare, som vi gjorde i den förra metoden, växlar vi här helt enkelt ett booleskt värde så att det negeras vid varje anrop.

Använda useState och useCallback krokar

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

Återigen fungerar denna strategi genom att förändra staten. I det här fallet, även om vi inte tekniskt ändrar värde av staten, vi är skicka det ett nytt objekt, vilket anses vara nytt av React eftersom det inte gör "djupa" jämställdhetskontroller av tillstånd.

Som du kan se finns det ett antal sätt att uppnå samma sak här. Tänk på att alla dessa tekniskt sett är antimönster och bör undvikas när det är möjligt. Men om du inte kan lösa det underliggande problemet och behöver tvinga fram uppdatering av en komponent, bör någon av metoderna som vi har visat här fungera.

Slutsats

I den här artikeln har vi sett hur man tvingar fram uppdateringar på React-komponenter. Vi såg också hur detta kan uppnås i både funktionella och klassbaserade komponenter. Även om det inte nödvändigtvis är bra praxis, är det användbart att förstå hur det fungerar om vi behöver använda det i speciella fall.