ReackAnimationFrameを使用してReact Hooksを使用します

requestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを注意深く読んでいない場合は、頭痛がする可能性があります。ここに私が個人的に経験した3つの「トラップ」の瞬間があります。

要するに、 useEffectの2番目のパラメーターとして空の配列を使用して、複数回実行しないようにします。状態のセッター関数に関数を渡して、正しい状態が常に利用可能であることを確認します。 useRef 、タイムスタンプやリクエストIDなどのものを保存します。

useRef 、DOM参照に使用されるだけではありません

関数コンポーネントに変数を保存する方法は3つあります。

1. コンポーネントが再レンダリングされるたびに、単純なconstを定義するか、その価値が常に再活性化されるlet性があります。
2. useStateを使用することができますが、その価値は再レンダリングで変わらないままであり、変更すると再レンダリングもトリガーできます。
3. useRef使用できます。

useRefフックは主にDOMにアクセスするために使用されますが、これだけではありません。これは、複数の再レンダーに値を保持する可変オブジェクトです。 useState Hookと非常によく似ていますが、その値.current使用してその価値を読み書きできることを除いて、その値を変更することはコンポーネントを再レンダリングしません。

たとえば、次の例は、コンポーネントが親コンポーネントによって再レンダリングされている場合でも、常に<samp>5</samp>表示します。

 function component（）{
  変数= 5とします。

  setimeout（（）=> {
    変数=変数3;
  }、100）

  戻る<div>{変数}</div>
}

...そして、この例は、親コンポーネントが変更されていなくても、数を3回増やし、再レンダリングを続けます。

 function component（）{
  const [variable、setVariable] = React.Usestate（5）;

  setimeout（（）=> {
    SetVariable（変数3）;
  }、100）

  戻る<div>{変数}</div>
}

最後に、この例は5を返し、再レンダリングされません。ただし、親コンポーネントが再レンダリングをトリガーすると、毎回値が増加します（100ミリ秒後に再レンダリングが発生すると仮定します）。

 function component（）{
  const variable = React.useref（5）;

  setimeout（（）=> {
    variable.current = variable.current 3;
  }、100）

  戻る<div>{variable.current}</div>
}

次のレンダリングまたは後のレンダリングで覚えておきたい変数値があり、変更時に再レンダリングをトリガーしたくない場合は、 useRef使用する必要があります。この例では、クリーニング中にリクエストアニメーションフレームIDを絶えず変更する必要があります。サイクル間の経過時間に基づいてアニメーション化する場合は、前のアニメーションのタイムスタンプを覚えておく必要があります。これらの2つの変数は、参照として保存する必要があります。

useEffectの副作用

useEffect Hookを使用して、リクエストを初期化してクリーニングできますが、1回だけ実行されるようにしたいと考えています。それ以外の場合は、最終的にレンダリングするたびにアニメーションフレームリクエストを作成、キャンセル、および再作成します。ここに有効な、しかし悪い例があります：

 function app（）{
  const [state、setstate] = race.usestate（0）

  const requestref = race.useref（）

  const animate = time => {
    //アニメーションrequestref.current = requestAnimationFrame（animate）に従ってステータスを変更します。
  }

  //これを行わないでください。
    requestref.current = requestAnimationFrame（animate）;
    return（）=> cancelanimationFrame（requestref.current）;
  }）;

  戻る<div>{州}</div> ;
}

なぜだめですか？このコードを実行すると、 useEffect animate関数をトリガーし、状態を変更し、新しいアニメーションフレームを要求します。状態の変更が関数全体を再度実行することでコンポーネントを再レンダリングすることを除いて、良いように聞こえます（前のサイクルでanimate関数によって行われたリクエストをクリーンアップとしてキャンセルし、新しい要求されたrequesteed useEffectフックを起動することを含む）。これは最終的に、 animate関数によって行われたリクエストに置き換えられますが、これは完全に不要です。 animate関数で新しいリクエストを開始しないことでこれを回避できますが、これはまだあまり良くありません。各ラウンドで不必要なクリーンアップを残します。他の理由でコンポーネントが再レンダーを再レンダリングする場合（親コンポーネントが再レンダーまたは他の状態が変更されたなど）、不必要なキャンセルとリクエストの再作成が依然として発生します。より良いパターンは、リクエストを一度だけ初期化し、 animate関数を介して回転させ、コンポーネントがアンロードされたときに一度クリーンアップすることです。

useEffectフックが1回だけ実行されるようにするために、空の配列を2番目のパラメーターとして渡すことができます。ただし、空の配列を渡すには副作用があり、アニメーションプロセス中に正しい状態を取得することができなくなります。 2番目のパラメーターは、効果が応答する必要がある変更値のリストです。私たちは何にも反応したくありません - アニメーションを初期化したいだけなので、空の配列があります。しかし、Reactはそれを解釈します。これは、この効果がステータスと最新である必要がないことを意味するためです。これには、最初に効果から呼び出されたanimate関数が含まれます。その結果、 animate関数で状態の価値を取得しようとすると、常に初期値になります。以前の値と経過時間に基づいて状態を変更したい場合、それは機能しない可能性があります。

 function app（）{
  const [state、setstate] = race.usestate（0）

  const requestref = race.useref（）

  const animate = time => {
    //ここの「状態」は、常に初期値requestref.current = requestAnimationFrame（animate）になります。
  }

  React.useeffect（（）=> {
    requestref.current = requestAnimationFrame（animate）;
    return（）=> cancelanimationFrame（requestref.current）;
  }、[]）; //効果が一度だけ実行されることを確認してください。<div> {州}</div> ;
}

状態のセッター関数も関数を受け入れます

useEffect Hookが状態を初期値にロックしたとしても、最新の状態を使用する方法があります。 useStateフックのセッター関数も関数を受け入れることができます。したがって、ほとんどの場合、現在の状態に基づいて値を渡す代わりに：

 SetState（StateDelta）

…以前の値をパラメーターとして受信する関数を渡すこともできます。そして、はい、これは私たちの場合でも正しい値を返します。

 setState（prevstate => prevstate delta）

すべてをまとめてください

これがすべてを要約する簡単な例です。上記のすべてをまとめて、100にカウントして最初からやり直すカウンターを作成します。 useRefストレージを使用して、コンポーネント全体の技術変数を繰り返すことなく、持続して変異させたいと考えています。空の配列を2番目のパラメーターとして使用することにより、 useEffect 1回しか実行されないことを確認します。私たちは、常に正しい状態を持っていることを確認するためにuseStateのセッターに関数を渡すことで状態を変異させます。

更新：カスタムフックをさらに進みます

基本が明確になったら、ほとんどのロジックをカスタムフックに抽出することにより、メタプログラミングにフックを使用することもできます。これには2つの利点があります。

1. コンポーネントを大幅に簡素化し、アニメーションに関連しているが主なロジックに関連していない技術変数を隠します。
2. カスタムフックは再利用可能です。別のコンポーネントでアニメーションが必要な場合は、単純に使用することもできます。

カスタムフックは最初は高レベルのトピックのように聞こえるかもしれませんが、最終的にはコードの一部をコンポーネントから関数に移動し、その機能を他の関数と同様にコンポーネントで呼び出します。慣習により、カスタムフックの名前はuseキーワードを使用し、フックのルールが適用される必要がありますが、それ以外には、入力でカスタマイズできる単純な機能であり、何かを返す可能性があります。

この例では、 requestAnimationFrameの共通フックを作成するために、各アニメーションサイクルでカスタムフックが呼び出すコールバック関数を渡すことができます。このようにして、メインのアニメーションロジックはコンポーネントに残りますが、コンポーネント自体がより集中します。

以上がReackAnimationFrameを使用してReact Hooksを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。