React useGetSet 钩子

简介

在本实验中，我们将探索如何在 React 中使用 useGetSet 钩子。这个钩子使我们能够创建一个有状态的值，并分别使用获取器和设置器函数来检索或更新其值。在本实验结束时，你将更好地理解如何在你的 React 应用程序中使用这个钩子。

Skills Graph

React useGetSet 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

这段代码片段定义了一个名为 useGetSet 的自定义 React 钩子，它创建一个有状态的值，并返回一对用于获取和设置其值的函数。Counter 组件使用这个钩子来实现按钮中显示的计数的延迟递增。

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 />);

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React useGetSet 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。