React の useTimeout フック

ReactReactBeginner
オンラインで実践に進む

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

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、React の useTimeout カスタムフックを使って宣言的に setTimeout() 関数を実装する方法を探ります。このフックを使うと、タイムアウトを設定して簡単にクリーンアップできるだけでなく、最新のコールバック関数も覚えておくことができます。また、useTimeout フックを使って 1 秒間隔でコンポーネントの状態を更新する 1 秒タイマーを作成する例も見てみましょう。


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 フック

VM には既に index.htmlscript.js が用意されています。一般的には、script.jsstyle.css にのみコードを追加すればよいです。

宣言的に setTimeout() を実装するには、callbackdelay を受け取るカスタムフックを作成します。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 でさらに多くの実験を練習することができます。

OSZAR »