Sådan tvinges du til at opdatere en React-komponent

Introduktion

I denne artikel viser vi dig, hvordan du tvinger opdatering af en komponent i React.js. Mere specifikt vil vi give en kort introduktion til React-gengivelser, vi viser, hvordan man tvinger opdateringer i klassebaserede komponenter, og hvordan man tvinger opdateringer i funktionelle komponenter.

Reager Re-renders

React håndterer i de fleste tilfælde automatisk gengivelseskomponenter for dig. Årsagen til dette kan være baseret på, hvornår rekvisitter eller tilstand er blevet opdateret. Så når en tilstand eller ejendom ændres, gengives komponenten. Men hvad hvis din komponent er afhængig af noget andet og ikke nødvendigvis af din stat eller ejendom? I så fald skal du muligvis tvinge opdateringen til komponenten, da React muligvis ikke har registreret ændringen.

Lad os tage et kig på, hvordan man bruger denne tvungne opdatering på en React-komponent. For at vise dette vil vi lave en simpel applikation til demoformål.

Bemærk: Vi vil dække nogle få begreber af React, så det er tilrådeligt at have grundlæggende viden om React.

Tvinge opdateringer på klassebaserede komponenter

Klassekomponenten har en indbygget metode til at genrendere en komponent, kaldet forceUpdate(), som bruges til at tvinge en komponent til at gengive. Du kan læse mere om forceUpdate() metode på React's officiel hjemmeside.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Bemærk: Det er ikke tilrådeligt at stole på opdatering af komponenter ved hjælp af forceUpdate() metode. Når du har brug for denne metode, bør du først prøve at analysere din kode og finde ud af, om der er en anden grund til, at React ikke opdaterer komponenten. Du kan opleve, at en fejl forårsager dette, eller at du kan omstrukturere din kode på en måde, der tillader React at gengive komponenten korrekt på egen hånd.

Her er et eksempel på, hvordan man tvinger en opdatering på en klassebaseret 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

Der sker meget mere inden for denne metode, end det ser ud til. For eksempel at ringe forceUpdate() udløser også livscyklusmetoderne for de underordnede komponenter. Og som vi ved med React, opdaterer den kun DOM, hvis opmærkningen rent faktisk har ændret sig.

Du kan få adgang til live kode her.

Tvinge opdateringer på funktionelle komponenter

Funktionelle komponenter har ingen indbygget metode til at gengive komponenter, som deres klassebaserede modstykker gør. Det betyder, at vi ikke har forceUpdate() metode til rådighed for os. Husk dog, at komponenter i React typisk genrenderes på grund af tilstands- eller propændringer. Ved at bruge dette kan vi opnå måder at tvinge upate på.

Fra v16.8+ har React et koncept kaldet Hooks, som kan bruges i funktionelle komponenter til opdatering af tilstand, udførelse af bivirkninger osv. Vi vil bruge disse hooks til vores fordel for at få en komponent til at gengive.

Her er nogle eksempler på, hvordan man tvinger en opdatering i en funktionel komponent:

Brug af useReducer krog

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

function handleClick() {
    forceUpdate();
}

En reducering i React bruges typisk, når du har kompleks tilstandslogik og handlinger. Her bruger vi det simpelthen til at udløse opdateringen ved at opdatere en dummy tilstandsvariabel, x. Tilstanden skal faktisk ændres for at udløse opdateringen, hvilket er grunden til, at den øges ved hvert opkald.

Brug useState krog

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 bag denne type kraftopdatering ligner meget useReducer i, at vi konstant opdaterer tilstand for at fremtvinge ændringen. I stedet for at øge en tæller, som vi gjorde i den sidste metode, skifter vi blot en boolsk værdi, så den negeres ved hvert opkald.

Brug af useState , useCallback kroge

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

Igen virker denne strategi ved at ændre staten. I dette tilfælde, selvom vi ikke teknisk ændrer værdi af staten, vi er at sende det et nyt objekt, som betragtes som nyt af React, da det ikke udfører "dybe" lighedstjek på staten.

Som du kan se, er der en række måder at opnå det samme her. Husk, at disse alle er teknisk anti-mønstre og bør undgås, når det er muligt. Men hvis du ikke er i stand til at løse det underliggende problem og har brug for at tvinge opdatering af en komponent, så burde enhver af de metoder, vi har vist her, fungere.

Konklusion

I denne artikel har vi set, hvordan man tvinger opdateringer til React-komponenter. Vi så også, hvordan dette kan opnås i både funktionelle og klassebaserede komponenter. Selvom det ikke nødvendigvis er god praksis, er det nyttigt at forstå, hvordan det fungerer, hvis vi skal bruge det i særlige tilfælde.