Membuka Kunci Kuasa penggunaanRef: Panduan Komprehensif untuk Pembangun React

Malangnya, useRef dipandang rendah. Ia bukan antara cangkuk yang paling popular, tetapi ia bermanfaat. Mengetahui cara dan tempat menggunakannya boleh mencapai hasil yang hebat.

Mari Mulakan dengan Asas

useRef ialah React Hook yang membolehkan anda merujuk nilai yang tidak diperlukan untuk pemaparan.

React akan mengingati nilai yang anda cipta melalui useRef, sama ada anda membuat objek JavaScript yang merujuk nod dalam DOM atau nilai mudah, dan ia tidak akan hilang semasa pemaparan semula.

Apa yang Ia Memberi Kita?

1. Mengakses Elemen DOM:

   • Anda boleh mencapai elemen dalam DOM dengan mudah. Contohnya, anda boleh mendapatkan nilai medan input, fokus pada elemen tertentu, dapatkan ketinggian dan lebarnya, tatal ke bahagian tertentu skrin dan banyak lagi.

2. Menyimpan Nilai Boleh Berubah:

   • Anda boleh mengingati mana-mana data yang anda perlukan tanpa memaparkan semula komponen. Contohnya, jika anda memerlukan kaunter atau pemasa, pilih useRef berbanding useState.

Contoh

Berikut ialah beberapa contoh untuk menggambarkan kuasa useRef.

Contoh 1: Rujukan kepada Nombor

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;

Dalam contoh ini:

• refCount ialah rujukan boleh ubah kepada nombor.
• refInputField ialah rujukan kepada elemen input.
• Apabila butang diklik, pembilang bertambah dan medan input memperoleh fokus.

Contoh 2: Menjejaki Nilai Terdahulu

Satu lagi kes penggunaan biasa untuk useRef ialah menjejaki nilai sebelumnya.

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;

Dalam contoh ini:

• prevCountRef menjejaki nilai kiraan sebelumnya.
• Kait useEffect mengemas kini prevCountRef.current apabila kiraan berubah.
• Ini membolehkan anda memaparkan kedua-dua kiraan semasa dan sebelumnya tanpa mencetuskan pemaparan semula yang tidak perlu.

Petua dan Trik Lanjutan dengan useRef

1. Nilai Berterusan Merentas Render

useRef boleh digunakan untuk mengekalkan nilai merentas pemaparan tanpa menyebabkan pemaparan semula, tidak seperti useState. Ini amat berguna untuk menyimpan nilai yang tidak memberi kesan langsung kepada UI tetapi perlu diingati.

Contoh: Menjejak kiraan pemaparan komponen.

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. Mengintegrasikan dengan Perpustakaan Pihak Ketiga

useRef tidak ternilai apabila bekerja dengan perpustakaan pihak ketiga yang memerlukan manipulasi langsung elemen DOM, seperti menyepadukan dengan perpustakaan carta, mengurus pemain video atau mengendalikan animasi.

Contoh: Mengintegrasikan pustaka carta.

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. Mengelakkan Re-Render yang Tidak Perlu dalam Aplikasi Kompleks

Dalam aplikasi kompleks yang mempunyai prestasi kritikal, menggunakan useRef untuk menyimpan objek boleh ubah boleh membantu mengelakkan pemaparan semula yang tidak perlu.

Contoh: Menyimpan objek keadaan boleh ubah.

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. Mengelakkan Isu Penutupan

Menggunakan useRef boleh membantu mengelakkan isu penutupan dengan menyediakan rujukan yang stabil kepada nilai yang berterusan merentas pemaparan.

Contoh: Pemasa dengan useRef untuk mengelakkan keadaan basi.

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;

Kesimpulan

Cangkuk bagus, dan anda harus menggunakannya. Anda boleh mencapai banyak perkara jika anda memahami cara React berfungsi dan menggunakan cangkuk dengan betul. useRef amat berkuasa untuk:

• Mengakses dan memanipulasi elemen DOM.
• Menyimpan nilai boleh ubah yang tidak mencetuskan pemaparan semula.
• Nilai berterusan merentas pemaparan.
• Menyepadukan dengan perpustakaan pihak ketiga.
• Mengelakkan pemaparan semula yang tidak perlu dalam aplikasi yang kompleks.
• Mengurangkan isu penutupan.

Dengan memahami dan menggunakan useRef, anda boleh menulis komponen React yang lebih cekap dan berkesan. Kekuatan mata kail yang sebenar terletak pada memahami tingkah laku mereka dan menerapkannya dengan bijak.

Tahukah anda, useState bukanlah jawapan yang betul?

Atas ialah kandungan terperinci Membuka Kunci Kuasa penggunaanRef: Panduan Komprehensif untuk Pembangun React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!