React の useRequestAnimationFrame フック

ReactReactBeginner
今すぐ練習

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

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

はじめに

この実験では、React で useRequestAnimationFrame フックを使って関数をアニメーションさせ、各再描画の前に実行されるようにする方法を探ります。このフックは、Web アプリケーションでスムーズで効率的なアニメーションを作成するのに役立ちます。このフックを作成し、リアルタイムで更新される単純なカウンターコンポーネントに実装するプロセスを見ていきます。


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/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38405{{"React の useRequestAnimationFrame フック"}} react/event_handling -.-> lab-38405{{"React の useRequestAnimationFrame フック"}} react/hooks -.-> lab-38405{{"React の useRequestAnimationFrame フック"}} react/use_state_reducer -.-> lab-38405{{"React の useRequestAnimationFrame フック"}} end

React useRequestAnimationFrame フック

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

各再描画の前にアニメーション関数を実行するには、useRef() フックを使って requestRefpreviousTimeRef 変数を作成します。その後、これらの変数を更新し、callback を実行し、永続的に Window.requestAnimationFrame() を呼び出す animate() 関数を定義します。最後に、空の配列を使って useEffect() フックを使って、requestRef の値を Window.requestAnimationFrame() で初期化し、コンポーネントがアンマウントされたときに返される値と Window.cancelAnimationFrame() を使ってクリーンアップします。

以下は useRequestAnimationFrame() の例の実装です:

const useRequestAnimationFrame = (callback) => {
  const requestRef = React.useRef();
  const previousTimeRef = React.useRef();

  const animate = (time) => {
    if (previousTimeRef.current) {
      callback(time - previousTimeRef.current);
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);
};

このカスタムフックをコンポーネントで使用するには、単にコールバック関数を渡します。たとえば、100 FPS で更新される単純なカウンターを作成するには:

const Counter = () => {
  const [count, setCount] = React.useState(0);

  useRequestAnimationFrame((deltaTime) => {
    setCount((prevCount) => (prevCount + deltaTime * 0.01) % 100);
  });

  return <p>{Math.round(count)}</p>;
};

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

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます!あなたは React useRequestAnimationFrame フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。