掌握 React 中的 useTimeout 钩子

简介

在本实验中，我们将探索如何使用 React 中的 useTimeout 自定义钩子以声明式方式实现 setTimeout() 函数。这个钩子使我们能够轻松地设置一个超时并清理它，同时还能记住最新的回调函数。我们还将看到一个使用 useTimeout 钩子创建一个每秒更新组件状态的一秒定时器的示例。

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/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38411{{"React useTimeout 钩子"}} react/hooks -.-> lab-38411{{"React useTimeout 钩子"}} react/use_state_reducer -.-> lab-38411{{"React useTimeout 钩子"}} end

React useTimeout 钩子

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

要以声明式方式实现 setTimeout()，创建一个自定义钩子，它接受一个 callback 和一个 delay。使用 useRef() 钩子为回调函数创建一个 ref，并使用 useEffect() 钩子记住最新的回调。然后，使用 useEffect() 钩子设置超时并进行清理。

以下是一个演示此方法的示例代码片段：

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

const OneSecondTimer = (props) => {
  const [seconds, setSeconds] = React.useState(0);

  useTimeout(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

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

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

总结

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