釋放 useRef 的力量：React 開發人員綜合指南-js教程-PHP中文網

釋放 useRef 的力量：React 開發人員綜合指南

PHPz

發布： 2024-07-30 12:50:33

原創

321 人瀏覽過

不幸的是，useRef 被低估了。它不是最受歡迎的鉤子之一，但它是有益的。知道如何以及在哪裡使用它可以取得很好的效果。

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

讓我們從基礎開始

useRef 是一個 React Hook，可讓您引用渲染不需要的值。

React 會記住你透過 useRef 建立的值，無論你是建立一個引用 DOM 中的節點的 JavaScript 物件還是一個簡單的值，並且它在重新渲染期間不會遺失。

它為我們帶來了什麼？

存取 DOM 元素：
- 您可以輕鬆存取 DOM 中的元素。例如，您可以取得輸入欄位的值、專注於特定元素、取得其高度和寬度、捲動到螢幕的特定部分等等。
儲存可變值：
- 您可以記住您需要的任何數據，而無需重新渲染元件。例如，如果您需要計數器或計時器，請選擇 useRef 而不是 useState。

範例

這裡有一些例子來說明 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 的另一個常見用例是追蹤先前的值。

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 追蹤之前的計數值。
只要計數發生變化，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. 與第三方函式庫集成

在使用需要直接操作 DOM 元素的第三方程式庫（例如與圖表庫整合、管理視訊播放器或處理動畫）時，useRef 非常有用。

範例：整合圖表庫。

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;

登入後複製