React useGetSet-Hook

ReactReactBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

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

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38386{{"React useGetSet-Hook"}} react/event_handling -.-> lab-38386{{"React useGetSet-Hook"}} react/hooks -.-> lab-38386{{"React useGetSet-Hook"}} react/use_state_reducer -.-> lab-38386{{"React useGetSet-Hook"}} end

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.