はじめに
この実験では、React の useTimeout
カスタムフックを使って宣言的に setTimeout()
関数を実装する方法を探ります。このフックを使うと、タイムアウトを設定して簡単にクリーンアップできるだけでなく、最新のコールバック関数も覚えておくことができます。また、useTimeout
フックを使って 1 秒間隔でコンポーネントの状態を更新する 1 秒タイマーを作成する例も見てみましょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、React の useTimeout
カスタムフックを使って宣言的に setTimeout()
関数を実装する方法を探ります。このフックを使うと、タイムアウトを設定して簡単にクリーンアップできるだけでなく、最新のコールバック関数も覚えておくことができます。また、useTimeout
フックを使って 1 秒間隔でコンポーネントの状態を更新する 1 秒タイマーを作成する例も見てみましょう。
VM には既に
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 でさらに多くの実験を練習することができます。