React useGetSet-Hook

Einführung

In diesem Lab werden wir die Verwendung des useGetSet-Hooks in React untersuchen. Dieser Hook ermöglicht es uns, einen zustandsbehafteten Wert zu erstellen und dessen Wert mithilfe von Getter- und Setter-Funktionen jeweils abzurufen oder zu aktualisieren. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie Sie diesen Hook in Ihren React-Anwendungen verwenden.

Skills Graph

React useGetSet-Hook

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

Dieser Codeausschnitt definiert einen benutzerdefinierten React-Hook namens useGetSet, der einen zustandsbehafteten Wert erstellt und eine Funktionspaarung für das Abrufen und Festlegen seines Werts zurückgibt. Die Counter-Komponente verwendet diesen Hook, um eine verzögerte Inkrementierung eines Zählers zu implementieren, der in einem Button angezeigt wird.

const useGetSet = (initialState) => {
  const stateRef = React.useRef(initialState);
  const [, update] = React.useReducer(() => ({}), {});

  const getState = React.useCallback(() => stateRef.current, []);
  const setState = React.useCallback((newState) => {
    stateRef.current = newState;
    update();
  }, []);

  return [getState, setState];
};

const Counter = () => {
  const [getCount, setCount] = useGetSet(0);
  const onClick = React.useCallback(() => {
    setTimeout(() => {
      setCount(getCount() + 1);
    }, 1000);
  }, [getCount, setCount]);

  return <button onClick={onClick}>Count: {getCount()}</button>;
};

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

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