React useDefault Hook

Einführung

In diesem Lab werden wir untersuchen, wie man in React einen benutzerdefinierten Hook namens useDefault erstellt. Der Zweck dieses Hooks ist es, einen zustandsbehafteten Wert mit einem Standardwert als Rückfall zu erstellen, wenn dieser null oder undefined ist, sowie eine Funktion, um ihn zu aktualisieren. Am Ende des Labs werden Sie ein besseres Verständnis dafür haben, wie man benutzerdefinierte Hooks verwendet, um Ihren React-Code zu vereinfachen und effizienter zu gestalten.

React useDefault 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.

Hier ist der Code:

const useDefault = (defaultState, initialState) => {
  const [value, setValue] = React.useState(initialState);
  const isEmpty = value === undefined || value === null;
  return [isEmpty ? defaultState : value, setValue];
};

const UserCard = () => {
  const [user, setUser] = useDefault({ name: "Adam" }, { name: "John" });

  return (
    <>
      <div>User: {user.name}</div>
      <input => setUser({ name: e.target.value })} />
      <button => setUser(null)}>Clear</button>
    </>
  );
};

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

Um einen zustandsbehafteten Wert mit einem Standardwert als Rückfall zu erstellen, verwenden Sie den useState()-Hook in React. Überprüfen Sie, ob der Anfangswert entweder null oder undefined ist. Wenn ja, geben Sie stattdessen den defaultState zurück, andernfalls geben Sie den tatsächlichen value-Zustand und die setValue-Funktion zurück. Der obige Code zeigt, wie diese Funktionalität in einem benutzerdefinierten Hook namens useDefault implementiert wird.

Im bereitgestellten Beispiel wird useDefault verwendet, um einen user-Zustand mit einem Standardwert von { name: 'Adam' } zu erstellen. Der Anfangszustand wird auf { name: 'John' } gesetzt. Im UserCard-Komponenten wird user zusammen mit einem Eingabefeld angezeigt, um seinen Namen zu aktualisieren. Es wird auch eine Leer-Button bereitgestellt, um den Zustand zurückzusetzen auf null. Schließlich wird die Komponente mithilfe von ReactDOM.createRoot() gerendert.

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 useDefault Hook Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.