Come forzare l'aggiornamento di un componente React

Introduzione

In questo articolo ti mostreremo come forzare l'aggiornamento di un componente in React.js. Più specificamente, daremo una breve introduzione ai re-render di React, mostreremo come forzare gli aggiornamenti nei componenti basati su classi e come forzare gli aggiornamenti nei componenti funzionali.

Reagire Re-renderizza

Nella maggior parte dei casi, React stessa gestisce automaticamente il re-rendering dei componenti. La causa di ciò può essere basata su quando gli oggetti di scena o lo stato sono stati aggiornati. Quindi, quando uno stato o una proprietà cambia, il componente esegue nuovamente il rendering. Ma cosa succede se il tuo componente dipende da qualcos'altro e non necessariamente dal tuo stato o proprietà? In tal caso potrebbe essere necessario forzare l'aggiornamento del componente poiché React potrebbe non aver rilevato la modifica.

Diamo un'occhiata a come utilizzare questo aggiornamento forzato su un componente React. Per dimostrarlo, creeremo una semplice applicazione a scopo dimostrativo.

Note:: Tratteremo alcuni concetti di React, quindi è consigliabile avere una conoscenza di base di React.

Forzare gli aggiornamenti sui componenti basati sulla classe

Il componente di classe ha un metodo integrato per rieseguire il rendering di un componente, chiamato forceUpdate(), che viene utilizzato per forzare il rendering di un componente. Puoi leggere di più sul forceUpdate() metodo su React Sito ufficiale.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note:: Non è consigliabile fare affidamento sull'aggiornamento dei componenti utilizzando il forceUpdate() metodo. Quando ti accorgi di aver bisogno di questo metodo, dovresti prima provare ad analizzare il tuo codice e capire se c'è un altro motivo per cui React non sta aggiornando il componente. Potresti scoprire che un bug sta causando questo o che puoi ristrutturare il tuo codice in modo da consentire a React di eseguire nuovamente il rendering del componente da solo.

Ecco un esempio di come forzare un aggiornamento su un componente basato sulla classe:

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

C'è molto di più in questo metodo di quanto possa sembrare. Ad esempio, chiamando forceUpdate() attiva anche i metodi del ciclo di vita per i componenti figlio. E come sappiamo con React, aggiornerà il DOM solo se il markup è effettivamente cambiato.

È possibile accedere a codice in tempo reale qui.

Forzare gli aggiornamenti sui componenti funzionali

I componenti funzionali non hanno un metodo integrato per rieseguire il rendering di un componente come fanno le loro controparti basate sulla classe. Ciò significa che non abbiamo il forceUpdate() metodo a nostra disposizione. Tuttavia, ricorda che in React i componenti in genere vengono renderizzati nuovamente a causa di modifiche di stato o prop. Usando questo, possiamo ottenere modi per forzare l'upate.

A partire dalla v16.8+, React ha un concetto chiamato Hooks che può essere utilizzato nei componenti funzionali per aggiornare lo stato, eseguire effetti collaterali, ecc. Useremo questi hook a nostro vantaggio per ottenere un componente da ri-renderizzare.

Ecco alcuni esempi di come forzare un aggiornamento in un componente funzionale:

Usando il useReducer gancio

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

function handleClick() {
    forceUpdate();
}

Un riduttore in React viene in genere utilizzato quando si hanno logiche e azioni di stato complesse. Qui lo usiamo semplicemente per attivare l'aggiornamento aggiornando una variabile di stato fittizia, x. Lo stato deve effettivamente cambiare per attivare l'aggiornamento, motivo per cui viene incrementato a ogni chiamata.

Usa il useState gancio

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

L'idea alla base di questo tipo di aggiornamento forzato è molto simile a useReducer in quanto aggiorniamo costantemente lo stato per forzare il cambiamento. Invece di incrementare un contatore, come abbiamo fatto nell'ultimo metodo, qui passiamo semplicemente a un valore booleano in modo che venga negato ad ogni chiamata.

Usando il useState ed useCallback ganci

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

Ancora una volta, questa strategia funziona cambiando lo stato. In questo caso, anche se tecnicamente non stiamo cambiando il APPREZZIAMO dello Stato, noi sono inviandogli un nuovo oggetto, considerato nuovo da React poiché non esegue controlli di uguaglianza "profondi" sullo stato.

Come puoi vedere, ci sono diversi modi per ottenere la stessa cosa qui. Tieni presente che questi sono tutti tecnicamente anti-pattern e dovrebbero essere evitati quando possibile. Ma se non sei in grado di risolvere il problema sottostante e devi forzare l'aggiornamento di un componente, allora uno qualsiasi dei metodi che abbiamo mostrato qui dovrebbe funzionare.

Conclusione

In questo articolo abbiamo visto come forzare gli aggiornamenti sui componenti di React. Abbiamo anche visto come questo può essere ottenuto sia nei componenti funzionali che in quelli basati sulla classe. Sebbene non sia necessariamente una buona pratica, è utile capire come funziona nel caso in cui sia necessario utilizzarla in casi speciali.