Memahami penggunaanRef: Panduan Pemula

pengenalan

Apa itu useRef

useRef ialah React hook yang membolehkan anda membuat rujukan berterusan kepada nilai atau elemen DOM. Tidak seperti useState, yang digunakan untuk mengurus keadaan yang mencetuskan pemaparan semula, useRef digunakan terutamanya untuk kesan sampingan atau mengakses elemen DOM secara terus.

Mengapa menggunakan useRef

Kait useRef amat berguna untuk:

• Mengakses elemen DOM secara langsung: anda boleh menggunakan useRef untuk mendapatkan rujukan kepada elemen DOM, membolehkan anda memanipulasi elemen DOM secara langsung tanpa mencetuskan pemaparan semula.
• Buat nilai berterusan: Tidak seperti keadaan, nilai yang dibuat dengan useRef berterusan antara pemaparan, menjadikannya sesuai untuk menyimpan data yang tidak perlu mencetuskan pemaparan semula.

Memahami cangkuk useRef

Kait useRef mengembalikan objek dengan sifat .current. apabila anda memanggil useRef, ia mencipta rujukan berterusan kepada nilai yang anda berikan sebagai hujah. Rujukan ini disimpan dalam .sifat semasa objek yang dikembalikan.

Mencipta rujukan dengan useRef

Untuk membuat rujukan hanya panggil useRef dengan nilai awal.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

Dalam contoh di atas countRef ialah rujukan kepada nilai awal 0.

Mengakses nilai rujukan

Untuk mengakses nilai rujukan hanya panggil objek countRef dengan .current property

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current++
  }

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

Dalam contoh di atas jika anda mengklik butang ia akan memanggil fungsi kenaikan yang akan meningkatkan countRef, tetapi kiraan tidak akan dikemas kini pada

Count: {countRef.current}

kemas kini kod kepada contoh di bawah untuk mendapatkan hasil yang anda jangkakan.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current++
    setCount(countRef.current)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

Kes penggunaan biasa untuk useRef

Mengakses dan memanipulasi elemen DOM secara langsung

ada kemungkinan untuk menggunakan useRef hook untuk mengakses dan menukar sifat elemen html

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    <input ref={inputRef} />
  )
}

Nilai Berterusan

Tidak seperti useState atau pembolehubah, useRef boleh menghantar nilai dan data antara pemaparan semula seperti data cache atau tetapan konfigurasi.

Pengoptimuman Prestasi

Dalam sesetengah kes, menggunakan useRef boleh membantu dengan pengoptimuman komponen dengan mengelakkan pemaparan semula yang tidak perlu. seperti jika anda mempunyai komponen yang menghasilkan senarai item yang besar, anda boleh cache menggunakan useRef dan hanya mengubah suai memaparkan semula item yang telah berubah.

Amalan dan pertimbangan terbaik

• Jangan tulis atau baca rujuk semasa semasa pemaparan
• Anda boleh mengubah sifat ref.current
• Apabila anda menukar sifat ref.current, React tidak memaparkan semula komponen anda
• Maklumat adalah setempat untuk setiap salinan komponen anda (tidak seperti pembolehubah di luar, yang dikongsi). Anda boleh menyimpan maklumat antara pemaparan semula (tidak seperti pembolehubah biasa, yang tetapkan semula pada setiap paparan).
• Anda boleh membaca atau menulis rujukan daripada pengendali acara atau kesan sebaliknya.
• Memanipulasi dom dengan ref

Menghantar rujukan kepada komponen tersuai.

Jika anda cuba menghantar ref kepada komponen anda sendiri seperti ini

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

Anda mungkin mendapat ralat dalam konsol:
Amaran: Komponen fungsi tidak boleh diberi rujukan. Percubaan untuk mengakses rujukan ini akan gagal. Adakah anda bermaksud menggunakan React.forwardRef()?

Untuk menyelesaikan isu ini bungkus komponen tersuai dengan forwardRef seperti:

const inputRef = useRef(null);

return <MyInput value={value} ref={inputRef} />;

Komponen tersuai:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

Kesimpulan

useRef ialah cangkuk berkuasa yang digunakan terutamanya untuk penggunaan kesan sampingan seperti caching data antara pemaparan semula atau mengakses elemen DOM. Ia merupakan alat yang hebat untuk pengoptimuman prestasi dan mencapai fungsi tertentu dalam aplikasi React.

Atas ialah kandungan terperinci Memahami penggunaanRef: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!