React シリーズ: useState と useRef-jsチュートリアル-php.cn

使い始めたときは、useState とそのすべての癖に圧倒されるかもしれません。 useRef をミックスに投入すると、大音量の脳内爆発が起こります。

React Series: useState vs useRef

エンジニアは通常、useRef と useState の違いを理解し、どちらを選択すべきかを理解するのが難しいため、useRef と useState の専門性をもう少し深く掘り下げることが有益であると考えました。

ここでは、それぞれについて私の定義を大まかに示しますが、明らかに単純化しすぎています。

useState は、値にアクセスして更新し、再レンダリングをトリガーできるようにするフックです。

useRef は、レンダリングに必要のない値を参照できるようにするフックです。

あなたは、なぜ、それぞれが何をもたらすのかを理解することが重要なのか、と自問しているかもしれません。まあ、実際に機能するという理由だけで、すべてに useState を組み込みたくなるかもしれません。

はい、ただし、コンポーネントが状態プロパティを 5 レベル下に渡してアプリが複雑になればなるほど、途中で大量の不要な更新がトリガーされ、おそらくパフォーマンスの問題が早く発生し始めるでしょう。想像以上に。

多くの開発者が抱いているもう 1 つの誤解は、useRef は DOM 要素の操作とアクセスのみができると考えていることです。これは悲しいことです。なぜなら、皆さんは useRef ができる他の 99 の機能を見逃しているからです。

useState から始めましょう!親愛なる開発者よ、今は耳を傾けてください ʕ◉ᴥ◉ʔ

✨ useState

useState は、変数の値が変更されたときにビューを更新するための強力かつ簡単な方法であり、手動で操作を実行することなく最新の値を画面と同期させます。宣言構文は次のようになります const [memesILiked, setMemesILiked] = useState(9000).

ここで、useState を使用して操作を実行するときに内部で何が起こるかについて話しましょう。

状態値を更新すると再レンダリングがトリガーされます。ご想像のとおり、ビューの再レンダリングはブラウザーにとって非常に処理コストの高い操作です。 React とブラウザーが連携してアプリが確実に更新されるようにする方法は次のとおりです:

イベントトリガー: イベントは状態の更新をトリガーします。クリックとかタイマーとか本当に何でも。
State Update: setState が呼び出され、コンポーネントの更新をスケジュールします。コンポーネントは「ダーティ」(再レンダリングが必要) としてマークされます。
調整フェーズ: React は、新しい仮想 DOM と古い仮想 DOM の間の調整を開始します。コンポーネントとそのすべての子を再帰的に再レンダリングします。
相違点の確認: React は、新しい仮想 DOM ツリーと以前の仮想 DOM ツリーを比較します。変更は、実際の DOM に適用される更新のリストに保存されます。
レンダリングフェーズ: レンダリングメソッドまたは関数コンポーネントが新しい状態で呼び出されます。
コミットフェーズ: React は、差分プロセスからの変更を実際の DOM に適用します。
DOM を更新します: 新しい状態を反映するために実際の DOM が更新されます。ブラウザーは DOM を再描画し、UI を視覚的に更新します。
レンダリング後のエフェクト: コンポーネントが再レンダリングされた後に実行されるようにスケジュールされていたエフェクトが呼び出されます。これには、レンダリング中に変更された依存関係に登録された useEffect フックが含まれます。

ふぅ、それはたくさんのことです...上記のプロセスにより、UI がアプリケーションの状態と同期していることが保証されますが、過度または不必要な再レンダリングがパフォーマンスの問題につながる可能性がある理由も強調されます。。幸いなことに、React は、useMemo や useCallback など、このプロセスの最適化に役立ついくつかの戦略とツールを提供していますが、それはこの記事の範囲を超えています!

要約すると、useState は非常に便利なフックであり、正しく使用すると、ユーザーに素晴らしいエクスペリエンスを提供できます。たとえば、テーマの切り替えを考えてみましょう。 useState を使用すると、ライトモードとダークモードを簡単に切り替えることができ、ユーザーは自分の好みに基づいてアプリが変化するのを即座に確認できます。

✨ useRef

さて、useRef について話しましょう。 useState は状態が変化したときに再レンダリングをトリガーすることがすべてであるのに対し、useRef は自分自身に決して注目を集めたくない静かな観察者のようなものです。これは、値が変更されたときに再レンダリングする必要がない、変更可能な値を保存するのに最適です。構文は const memeRef = useRef(null).

のようになります。

useRef は、DOM 要素に直接アクセスするために最もよく使用されます。たとえば、プログラムで入力フィールドにフォーカスする必要がある場合、useRef はその要素への参照を保持できます。ただし、useRef の機能は DOM アクセスだけにとどまりません。 任意の可変値を保存することもできます。そして、皆さん、ここは魔法が起こる場所です ??? (とにかく私の意見です)。

次のように考えてください。useRef は、再レンダリングをトリガーせずに、レンダリング間で値を保持する方法です。これにより、タイマー、カウンター、さらにはコンポーネントの以前の状態などのデータを保存するのに最適になります。 useState とは異なり、ref を更新しても、コンポーネントを再レンダリングするように React に通知されません。ただ静かに価値を更新し、ビジネスを続けます。

これは実際的な例です。単純なカウンターを実装したいとしますが、カウンターをインクリメントするたびに UI を更新したくないとします。 useRef を使用してカウンター値を保存できます。カウンタは期待どおりに増加しますが、コンポーネントはレンダリングの目的でこの ref 値を気にしないため、再レンダリングは行われません。

useRef は、追加のレンダリングを発生させずに状態の最新の値を保持するのにも優れています。たとえば、interval を使用して値を更新しているが、その値でミリ秒ごとに再レンダリングをトリガーしたくない場合は、useRef が頼りになるツールです。これにより、バックグラウンドで値を変更できるため、UI の応答性が維持され、不必要な再レンダリングが回避されます。

要約すると、useRef は次の用途に最適です。

DOM 要素へのアクセス: 入力フィールドにフォーカスするなどの古典的な使用例。
可変値の保存: タイマーや以前の値などの再レンダリングは必要ありません。
レンダリング間での値の維持: 再レンダリングを発生させずに、UI をスムーズかつ効率的に保ちます。

違いは理解できたと思います願っています (義務を正しく果たしたなら²)、次に、あまり一般的ではない使用例をいくつか見てみましょう。ここでは useRef が縁の下の力持ちであるように感じられるので、もう少し useRef に焦点を当てたいと思います。

コンポーネントのマウントステータスの追跡: useRef を使用して、コンポーネントがマウントされているかアンマウントされているかを追跡できます。これは、アンマウント後の状態更新を回避するのに役立ちます。
静的な値の保持: 定数やキャッシュされた値など、レンダリング間で変化しない静的な値を保存するには、useState より useRef の方が効率的です。
再初期化の防止: コードの一部がレンダリングごとに再実行されるのを防ぎたい場合 (WebSocket 接続の初期化など)。
以前のコールバックの保存: 以前のコールバック関数への参照を保持する必要がある場合、useRef はコンポーネントのレンダリングサイクルに影響を与えることなく、以前の関数参照を保存できます。
タイマー ID の参照: タイマー (setTimeout や setInterval など) を操作する場合、タイマーが設定またはクリアされるたびに再レンダリングがトリガーされるのを避けるために、タイマー ID を useRef に保存します。
アニメーションのトリガー: アニメーションを強制的にトリガーする場合 (CSS トランジションやスクロールアニメーションなど)、useRef を使用すると、再レンダリングを行わずに DOM 要素と直接対話できます。