React useUpdate-Hook

Einführung

In diesem Lab werden wir die Verwendung des useUpdate-Hooks in React erkunden. Dieser Hook ermöglicht es uns, einen Komponenten dazu zu zwingen, sich neu zu rendern, wenn er aufgerufen wird, was nützlich sein kann, um die Benutzeroberfläche mit neuen Daten oder Änderungen zu aktualisieren. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie Sie diesen Hook in Ihren React-Projekten implementieren, um die Leistung und Funktionalität Ihrer Anwendungen zu verbessern.

Skills Graph

React useUpdate-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Um einen Komponenten dazu zu zwingen, sich bei einem Aufruf neu zu rendern, verwenden Sie den useReducer()-Hook, um jedes Mal, wenn er aktualisiert wird, ein neues Objekt zu erstellen und seine dispatch zurückzugeben. Hier ist eine Beispielimplementierung der useUpdate()-Funktion:

const useUpdate = () => {
  const [, update] = React.useReducer(() => ({}));
  return update;
};

Sie können dann useUpdate() in Ihrem Komponenten verwenden, um eine Neuerstellung zu verursachen, wenn dies erforderlich ist:

const MyApp = () => {
  const update = useUpdate();

  return (
    <>
      <div>Zeit: {Date.now()}</div>
      <button onClick={update}>Aktualisieren</button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useUpdate-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.