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.