Cum să forțați actualizarea unei componente React

Introducere

În acest articol, vă vom arăta cum să forțați actualizarea unei componente în React.js. Mai precis, vom oferi o scurtă introducere în redările React, vom arăta cum să forțați actualizările în componentele bazate pe clasă și cum să forțați actualizările în componentele funcționale.

Reacționează la redări

React în sine gestionează automat componentele de redare pentru dvs., în cele mai multe cazuri. Cauza acestui lucru se poate baza pe momentul în care elementele de recuzită sau starea au fost actualizate. Deci, atunci când o stare sau o proprietate se schimbă, componenta se redă din nou. Dar ce se întâmplă dacă componenta ta depinde de altceva și nu neapărat de statul sau proprietatea ta? În acest caz, poate fi necesar să forțați actualizarea componentei, deoarece este posibil ca React să nu fi detectat modificarea.

Să aruncăm o privire la cum să folosiți această actualizare forțată pe o componentă React. Pentru a arăta acest lucru, vom crea o aplicație simplă în scopuri demonstrative.

notițe: Vom acoperi câteva concepte de React, așa că este recomandabil să aveți cunoștințe de bază despre React.

Forțarea actualizărilor asupra componentelor bazate pe clasă

Componenta de clasă are o metodă încorporată pentru redarea din nou a unei componente, numită forceUpdate(), care este folosit pentru a forța o componentă să se redea. Puteți citi mai multe despre forceUpdate() metoda pe React site oficial.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

notițe: Nu este recomandabil să vă bazați pe actualizarea componentelor folosind forceUpdate() metodă. Când vă aflați că aveți nevoie de această metodă, ar trebui mai întâi să încercați să vă analizați codul și să vă dați seama dacă există un alt motiv pentru care React nu actualizează componenta. Este posibil să descoperiți că o eroare provoacă acest lucru sau că vă puteți restructura codul într-un mod care să permită React să redea corect componenta pe cont propriu.

Iată un exemplu despre cum să forțați o actualizare pe o componentă bazată pe clasă:

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

În această metodă se întâmplă mult mai multe decât ar părea. De exemplu, a suna forceUpdate() declanșează metodele ciclului de viață și pentru componentele copil. Și după cum știm cu React, acesta va actualiza DOM-ul numai dacă marcajul s-a schimbat efectiv.

Puteți accesa cod live aici.

Forțarea actualizărilor asupra componentelor funcționale

Componentele funcționale nu au o metodă încorporată pentru redarea din nou a componentelor, așa cum fac omologii lor bazați pe clasă. Aceasta înseamnă că nu avem forceUpdate() metodă disponibilă pentru noi. Cu toate acestea, amintiți-vă că în React componentele sunt de obicei redate din nou din cauza modificărilor de stare sau prop. Folosind aceasta, putem obține modalități de a forța actualizarea.

Începând cu v16.8+, React are un concept numit Hooks, care poate fi folosit în componente funcționale pentru actualizarea stării, efectuarea de efecte secundare etc. Vom folosi aceste hook-uri în avantajul nostru pentru a obține o componentă de re-redată.

Iată câteva exemple despre cum să forțați o actualizare într-o componentă funcțională:

Utilizarea useReducer cârlig

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

function handleClick() {
    forceUpdate();
}

Un reductor în React este folosit de obicei atunci când aveți o logică și acțiuni complexe de stare. Aici îl folosim pur și simplu pentru a declanșa actualizarea prin actualizarea unei variabile de stare false, x. Starea trebuie să se schimbe pentru a declanșa actualizarea, motiv pentru care este incrementată la fiecare apel.

Folosește useState cârlig

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

Ideea din spatele acestui tip de actualizare forțată este foarte asemănătoare cu useReducer prin faptul că actualizăm constant starea pentru a forța schimbarea. În loc să incrementăm un contor, așa cum am făcut în ultima metodă, aici pur și simplu comutăm o valoare booleană, astfel încât să fie negat la fiecare apel.

Utilizarea useState și useCallback cârlige

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

Din nou, această strategie funcționează prin schimbarea statului. În acest caz, deși nu schimbăm din punct de vedere tehnic valoare a statului, noi sunt trimiterea unui obiect nou, care este considerat nou de către React, deoarece nu face verificări „profunde” de egalitate asupra stării.

După cum puteți vedea, există mai multe moduri de a realiza același lucru aici. Rețineți că toate acestea sunt anti-tipare din punct de vedere tehnic și ar trebui evitate atunci când este posibil. Dar dacă nu reușiți să rezolvați problema de bază și trebuie să forțați actualizarea unei componente, atunci oricare dintre metodele pe care le-am arătat aici ar trebui să funcționeze.

Concluzie

În acest articol am văzut cum să forțăm actualizările componentelor React. Am văzut, de asemenea, cum se poate realiza acest lucru atât în ​​componente funcționale, cât și bazate pe clasă. Deși nu este neapărat o practică bună, este util să înțelegem cum funcționează în cazul în care trebuie să-l folosim în cazuri speciale.