use の力を解き放つRef: React 開発者のための包括的なガイド-jsチュートリアル-php.cn

use の力を解き放つRef: React 開発者のための包括的なガイド

PHPz

リリース： 2024-07-30 12:50:33

オリジナル

356 人が閲覧しました

残念ながら、useRef は過小評価されています。これは最も人気のあるフックではありませんが、有益です。どこでどのように使用すれば、大きな結果が得られるかを知ることができます。

Unlocking the Power of useRef: A Comprehensive Guide for React Developers

基本から始めましょう

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

React は、DOM 内のノードを参照する JavaScript オブジェクトを作成しているか、単純な値を作成しているかに関係なく、useRef を通じて作成した値を記憶し、再レンダリング中に失われることはありません。

それは私たちに何を与えてくれるでしょうか？

DOM 要素へのアクセス:
- DOM 内の要素に簡単にアクセスできます。たとえば、入力フィールドの値を取得したり、特定の要素に焦点を当てたり、その高さと幅を取得したり、画面の特定の部分にスクロールしたりすることができます。
可変値の保存:
- コンポーネントを再レンダリングすることなく、必要なデータを記憶できます。たとえば、カウンターまたはタイマーが必要な場合は、useState ではなく useRef を選択します。

例

useRef の威力を説明するための例をいくつか示します。

例 1: 数値への参照

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current + 1;
    refInputField.current.focus();
  }

  return (
    <>
      <button onClick={onClick}>
        Click me!
      </button>
      <input ref={refInputField} />
    </>
  );
};

export default Counter;

ログイン後にコピー

この例では:

refCount は数値への変更可能な参照です。
refInputField は、入力要素への参照です。
ボタンをクリックすると、カウンターが増加し、入力フィールドにフォーカスが置かれます。

例 2: 以前の値を追跡する

useRef のもう 1 つの一般的な使用例は、以前の値を追跡することです。

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default PreviousValue;

ログイン後にコピー

この例では:

prevCountRef は、count の前の値を追跡します。
useEffect フックは、カウントが変更されるたびに prevCountRef.current を更新します。
これにより、不必要な再レンダリングをトリガーせずに、現在と以前のカウントの両方を表示できます。

useRef を使用した高度なヒントとコツ

1. レンダー間での値の保持

useRef は、useState とは異なり、再レンダリングを行わずにレンダリング間で値を保持するために使用できます。これは、UI に直接影響しないが覚えておく必要がある値を保存する場合に特に便利です。

例: コンポーネントのレンダリング数を追跡します。

import React, { useRef, useEffect } from 'react';

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <p>This component has rendered {renderCount.current} times</p>
    </div>
  );
};

export default RenderCounter;

ログイン後にコピー

2. サードパーティのライブラリとの統合

useRef は、チャートライブラリとの統合、ビデオプレーヤーの管理、アニメーションの処理など、DOM 要素の直接操作が必要なサードパーティライブラリを操作する場合に非常に役立ちます。

例: チャートライブラリの統合。

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return <canvas ref={chartRef}></canvas>;
};

export default ChartComponent;

ログイン後にコピー

3. 複雑なアプリケーションにおける不必要な再レンダリングの回避

パフォーマンスが重要な複雑なアプリケーションでは、useRef を使用して可変オブジェクトを保存すると、不必要な再レンダリングを回避できます。

例: 可変状態オブジェクトの保存。

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    <div>
      <button onClick={() => updateName('Jane Doe')}>
        Update Name
      </button>
    </div>
  );
};

export default MutableState;

ログイン後にコピー

4. クロージャの問題を回避する

useRef を使用すると、レンダリング間で持続する値への安定した参照が提供されるため、クロージャの問題を回避できます。

例: 古い状態を回避するための useRef を使用したタイマー。

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
};

export default Timer;

ログイン後にコピー