So erzwingen Sie die Aktualisierung einer React-Komponente

Einleitung

In diesem Artikel zeigen wir Ihnen, wie Sie die Aktualisierung einer Komponente in React.js erzwingen. Genauer gesagt geben wir eine kurze Einführung in React Re-Renderings, wir zeigen, wie man Updates in klassenbasierten Komponenten erzwingt und wie man Updates in funktionalen Komponenten erzwingt.

Reagieren Sie erneut

React selbst kümmert sich in den meisten Fällen automatisch um das erneute Rendern von Komponenten für Sie. Die Ursache dafür kann darauf beruhen, wann Requisiten oder Status aktualisiert wurden. Wenn sich also ein Zustand oder eine Eigenschaft ändert, wird die Komponente neu gerendert. Aber was ist, wenn Ihre Komponente von etwas anderem abhängig ist und nicht unbedingt von Ihrem Staat oder Eigentum? In diesem Fall müssen Sie möglicherweise die Aktualisierung der Komponente erzwingen, da React die Änderung möglicherweise nicht erkannt hat.

Werfen wir einen Blick darauf, wie dieses erzwungene Update für eine React-Komponente verwendet wird. Um dies zu zeigen, erstellen wir eine einfache Anwendung für Demozwecke.

Note: Wir werden einige Konzepte von React behandeln, daher ist es ratsam, über Grundkenntnisse von React zu verfügen.

Erzwingen von Updates für klassenbasierte Komponenten

Die Klassenkomponente hat eine eingebaute Methode zum erneuten Rendern einer Komponente, genannt forceUpdate(), die verwendet wird, um das erneute Rendern einer Komponente zu erzwingen. Sie können mehr darüber lesen forceUpdate() Methode auf React offiziellen Website.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: Es ist nicht ratsam, sich auf die Aktualisierung von Komponenten mit dem zu verlassen forceUpdate() Methode. Wenn Sie feststellen, dass Sie diese Methode benötigen, sollten Sie zunächst versuchen, Ihren Code zu analysieren und herauszufinden, ob es einen anderen Grund gibt, warum React die Komponente nicht aktualisiert. Möglicherweise stellen Sie fest, dass dies durch einen Fehler verursacht wird, oder dass Sie Ihren Code so umstrukturieren können, dass React die Komponente selbst ordnungsgemäß neu rendern kann.

Hier ist ein Beispiel dafür, wie Sie eine Aktualisierung einer klassenbasierten Komponente erzwingen:

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

Bei dieser Methode passiert viel mehr, als es den Anschein haben mag. Zum Beispiel anrufen forceUpdate() löst auch die Lebenszyklusmethoden für die untergeordneten Komponenten aus. Und wie wir bei React wissen, wird das DOM nur aktualisiert, wenn sich das Markup tatsächlich geändert hat.

Sie können auf die Live-Code hier.

Erzwingen von Updates für funktionale Komponenten

Funktionale Komponenten haben keine eingebaute Methode zum erneuten Rendern einer Komponente, wie es ihre klassenbasierten Gegenstücke tun. Das bedeutet, dass wir die nicht haben forceUpdate() uns zur Verfügung stehende Methode. Denken Sie jedoch daran, dass in React-Komponenten normalerweise aufgrund von Status- oder Prop-Änderungen neu gerendert werden. Auf diese Weise können wir Wege finden, um Upate zu erzwingen.

Ab v16.8+ verfügt React über ein Konzept namens Hooks, das in funktionalen Komponenten zum Aktualisieren des Zustands, zum Ausführen von Nebeneffekten usw. verwendet werden kann. Wir werden diese Hooks zu unserem Vorteil nutzen, um eine Komponente neu zu rendern.

Hier sind einige Beispiele, wie Sie eine Aktualisierung in einer funktionalen Komponente erzwingen können:

Verwendung der useReducer Haken

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

function handleClick() {
    forceUpdate();
}

Ein Reducer in React wird normalerweise verwendet, wenn Sie über komplexe Zustandslogik und Aktionen verfügen. Hier verwenden wir es einfach, um die Aktualisierung auszulösen, indem wir eine Dummy-Zustandsvariable aktualisieren, x. Der Zustand muss sich tatsächlich ändern, um die Aktualisierung auszulösen, weshalb er bei jedem Aufruf inkrementiert wird.

Verwenden Sie das useState Haken

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

Die Idee hinter dieser Art von Force-Update ist sehr ähnlich useReducer , dass wir den Status ständig aktualisieren, um die Änderung zu erzwingen. Anstatt einen Zähler zu inkrementieren, wie wir es in der letzten Methode getan haben, schalten wir hier einfach einen booleschen Wert um, sodass er bei jedem Aufruf negiert wird.

Verwendung der useState und useCallback Haken

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

Auch diese Strategie funktioniert, indem der Zustand geändert wird. In diesem Fall, obwohl wir die technisch nicht ändern Wert des Staates, wir sind Senden eines neuen Objekts, das von React als neu betrachtet wird, da es keine „tiefen“ Gleichheitsprüfungen des Status durchführt.

Wie Sie sehen können, gibt es hier eine Reihe von Möglichkeiten, dasselbe zu erreichen. Denken Sie daran, dass dies alles technisch gesehen Anti-Patterns sind und nach Möglichkeit vermieden werden sollten. Aber wenn Sie das zugrunde liegende Problem nicht lösen können und die Aktualisierung einer Komponente erzwingen müssen, sollte eine der hier gezeigten Methoden funktionieren.

Zusammenfassung

In diesem Artikel haben wir gesehen, wie man Updates für React-Komponenten erzwingt. Wir haben auch gesehen, wie dies sowohl in funktionalen als auch in klassenbasierten Komponenten erreicht werden kann. Obwohl es nicht unbedingt eine gute Praxis ist, ist es nützlich zu verstehen, wie es funktioniert, falls wir es in besonderen Fällen verwenden müssen.