Aktualisieren eine Seite in React

1. Verwenden Sie die Methode reload(), um eine Seite in React manuell zu aktualisieren
2. Aktualisieren Sie den Status der Komponente, um eine Seite in React zu aktualisieren

Einer der wesentlichen Vorteile von React besteht darin, dass Sie die Seite nicht aktualisieren müssen, um die neuesten Updates anzuzeigen. React aktualisiert die Ansicht automatisch, wenn sich der Status ändert.

Trotzdem ist es manchmal notwendig, die Seite manuell zu aktualisieren. Beispielsweise kann ein einfaches Neuladen Inkonsistenzen im Status beheben.

In anderen Fällen möchten Sie möglicherweise einige unnötige Aktionen rückgängig machen. Mal sehen, wie Sie die Seite in React manuell aktualisieren können, was auch immer der Grund sein mag.

Verwenden Sie die Methode reload(), um eine Seite in React manuell zu aktualisieren

Meistens möchten wir eine manuelle Aktualisierung in React auslösen, nachdem der Benutzer auf eine Schaltfläche, einen Text oder ein anderes Element geklickt hat. Dazu müssen wir einen Event-Handler erstellen. Browser bieten nativ eine Fenster-Schnittstelle mit einem Ort-Objekt, einschließlich der reload()-Methode.

Es ist eine ziemlich einfache Methode, wie Sie im folgenden Beispiel sehen können. Es braucht nur ein Argument, mit dem angegeben wird, ob der Browser den Inhalt der Seite komplett neu vom Server laden soll oder nur den Cache.

Wir müssen diese Methode in unserem Ereignishandler verwenden, um eine Seite erfolgreich neu zu laden. Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    return <button onClick={() => window.location.reload()}>Refresh</button>;
  }
}

Es ist ein einfaches Beispiel für das manuelle Aktualisieren der Seite in React. Denken Sie daran, dass der Event-Handler onClick gleich einer Funktionsdefinition gesetzt werden sollte, nicht dem Aufruf. Auf diese Weise wird es nur ausgeführt, wenn der Benutzer auf die Schaltfläche klickt. Sie können selbst mit dem Code auf playcode experimentieren.

Alternativ können Sie die Lebenszyklusmethoden verwenden, um die Seite nach dem Mounten neu zu laden. Funktionale Komponenten haben keine Lebenszyklusmethoden, aber Sie können das gleiche Ergebnis mit dem Haken useEffect() erreichen.

Aktualisieren Sie den Status der Komponente, um eine Seite in React zu aktualisieren

Änderungen am lokalen Zustand der Komponente lösen automatisch die Aktualisierung aus. Es ist die natürliche Art, Seitenaktualisierungen in React zu handhaben, daher ist es besser an den offiziellen Richtlinien für bewährte Verfahren der Entwickler von React ausgerichtet.

Bei richtiger Erstellung müssen React-Apps nicht manuell aktualisiert werden, um die neuesten Änderungen im Zustand zu laden. Dieser Vorgang wird automatisch ausgelöst.

Der gesamte Zweck eines lokalen Zustands besteht darin, dass alle Änderungen am Zustand automatisch widergespiegelt werden. Schauen wir uns ein Beispiel an:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      textInput: ""
    }
  }
  render() {
    return <div>
            <input type="text" onChange={(e) => this.setState({textInput: e.target.value})} />
            <h1>{this.state.textInput}</h1> 
           </div>
  }
}

Es ist eine ziemlich einfache Demonstration, wie Zustandsänderungen automatisch die Seitenaktualisierung (auch Re-Rendering genannt) in React auslösen. Wir initiieren den Zustand mit einer textInput-Eigenschaft und aktualisieren die Eigenschaft jedes Mal, wenn sich der Wert im input-Feld ändert.