React-Komponenten zum Rerendern zwingen

1. Erzwingen Sie das Rendern von React-Komponenten mit den Klassenkomponenten
2. Erzwingen Sie das Rendern von Reaktionskomponenten mit den Funktionskomponenten

Standardmäßig werden die React-Komponenten durch die Änderungen ihres state oder ihrer props zum erneuten Rendern veranlasst. Wenn Sie die Best Practices von React befolgen, ist dieses Verhalten meistens mehr als ausreichend, um die gewünschten Ergebnisse zu erzielen.

In einigen Fällen reicht das Standardverhalten des Frameworks nicht aus und Sie müssen die Komponente manuell neu rendern. Sehen Sie sich vorher den Code sorgfältig an. Das Erzwingen einer erneuten Wiedergabe ist nur in einer begrenzten Anzahl von Umständen eine praktikable Option.

Erzwingen Sie das Rendern von React-Komponenten mit den Klassenkomponenten

Bei korrekter Verwendung sollte ein Aufruf der Methode setState() von React Class Component immer ein erneutes Rendern auslösen. Der Lebenszyklus von shouldComponentUpdate() kann eine bedingte Logik enthalten, die dieses Verhalten verhindert.

Wenn Sie setState() aufrufen, aber die Komponente nicht aktualisiert wird, stimmt möglicherweise etwas mit Ihrem Code nicht. Stellen Sie sicher, dass Sie einen triftigen Grund haben, die Methode forceUpdate() zu verwenden.

this.forceUpdate()

Wenn Ihre Methode render() auf Daten ausserhalb von state oder props basiert und Sie das erneute Rendern basierend auf Änderungen dieser Daten auslösen möchten, können Sie die Methode forceUpdate() verwenden.

Beispielcode:

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

In diesem Fall löst eine Änderung von state oder props kein Update aus. Es ist die Methode forceUpdate(), die es tut.

Empfohlene Vorgehensweise

React-Entwickler sollten forceUpdate() nur als letztes Mittel verwenden. Die Renderfunktion sollte nur aus props und state lesen. Wenn Sie diese Richtlinien befolgen, können Sie die Einfachheit und Effizienz Ihrer React-Komponenten sicherstellen.

Es wird nicht empfohlen, die Methode forceUpdate() häufig zu verwenden. Wenn Sie es häufig verwenden, sollten Sie sich Ihren Code ansehen und sehen, ob er verbessert werden könnte.

Erzwingen Sie das Rendern von Reaktionskomponenten mit den Funktionskomponenten

Funktionskomponenten beinhalten nicht die Methode forceUpdate(). Es ist jedoch immer noch möglich, sie mit den Hooks useState() oder useReducer zum erneuten Rendern zu zwingen.

useState

Ähnlich der Methode setState() von Klassenkomponenten löst der Hook useState() immer ein Update aus, solange das aktualisierte state-Objekt einen anderen Wert hat.

Sie können einen benutzerdefinierten Hook erstellen, der den Hook useState() verwendet, um ein Update zu erzwingen. Hier ist ein Beispielcode für einen solchen wiederverwendbaren Hook:

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

Wie wir alle wissen, gibt der Hook useState() zwei Werte zurück: den aktuellen Wert des state und seinen Setter. In diesem Fall benötigen wir nur den Setter newState.

useReducer

Da der Hook useState intern useReducer verwendet, können Sie diesen Hook direkt verwenden, um eine elegantere Lösung zu erstellen. Die von React Official Documents empfohlene Lösung verwendet ebenfalls useReducer(). Hier ist eine Beispiellösung:

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

Der Hook useReducer() gibt den aktuellen state und die dispatch-Funktion zurück. Im obigen Beispiel verwenden wir die Syntax [variableName, dispatchName], um diese Werte zu speichern.

In diesem Beispiel würde der Aufruf eines handleChange()-Handlers Ihre Komponente zwingen, jedes Mal zu aktualisieren.

Haken sind nicht dafür gedacht, auf diese Weise verwendet zu werden. Versuchen Sie, diese Lösungen zum Testen oder für Ausreißerfälle zu verwenden.