useRef Hook Dijelaskan

Kait useRef dalam React ialah ciri berkuasa yang membolehkan anda membuat rujukan boleh ubah kepada elemen DOM atau sebarang nilai lain yang berterusan untuk keseluruhan kitaran hayat komponen. Berikut ialah penjelasan terperinci tentang cara ia berfungsi, bersama kes penggunaannya:

Apakah useRef?

• Storan Berterusan: useRef menyediakan cara untuk menyimpan rujukan boleh ubah yang tidak mencetuskan pemaparan semula apabila dikemas kini. Ini berbeza daripada keadaan, di mana mengemas kini pembolehubah keadaan akan menyebabkan komponen dipaparkan semula.

• Mengembalikan Objek Boleh Ubah: Apabila anda memanggil useRef(initialValue), ia mengembalikan objek boleh ubah dengan sifat semasa yang boleh anda ubah suai. Nilai awal yang anda berikan kepada useRef ditetapkan kepada semasa, tetapi anda boleh menukar semasa pada bila-bila masa.

Sintaks Asas

const myRef = useRef(initialValue);

Contoh penggunaanRef

Berikut ialah contoh mudah di mana useRef digunakan untuk mengakses elemen DOM:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

Penjelasan Contoh

1. Mencipta Ref: const inputRef = useRef(null); mencipta rujukan untuk memegang rujukan kepada elemen input.

2. Menetapkan Ref: Atribut ref bagi elemen input diberikan kepada inputRef. Ini membolehkan React melampirkan elemen DOM input pada sifat semasa inputRef.

3. Mengakses Ref: Apabila butang diklik, fungsi focusInput mengakses elemen input melalui inputRef.current dan memanggil focus() padanya.

Kes Penggunaan

1. Mengakses Elemen DOM: Seperti yang ditunjukkan dalam contoh, useRef biasanya digunakan untuk mengakses dan berinteraksi dengan elemen DOM secara langsung.

2. Menyimpan Nilai Boleh Berubah: Anda boleh menggunakan useRef untuk menyimpan sebarang nilai boleh ubah yang tidak memerlukan pemaparan semula apabila ditukar, seperti ID pemasa atau nilai sebelumnya.
   

   const timerRef = useRef();

   const startTimer = () => {
     timerRef.current = setTimeout(() => {
       // some action
     }, 1000);
   };

   const stopTimer = () => {
     clearTimeout(timerRef.current);
   };

1. Nilai Berkekalan Merentas Render: Tidak seperti keadaan, nilai yang dipegang dalam useRef tidak ditetapkan semula pada pemaparan semula. Ini boleh berguna untuk menjejaki nilai yang digunakan dalam panggilan balik atau kesan.

2. Menyepadukan dengan Pustaka Pihak Ketiga: Apabila menggunakan perpustakaan pihak ketiga yang memanipulasi DOM secara langsung, useRef boleh menyediakan cara untuk menyimpan rujukan kepada nod DOM tersebut.

Perbandingan dengan useState

• Memaparkan semula: Mengemas kini pembolehubah keadaan dengan useState akan mencetuskan pemaparan semula komponen, manakala mengemas kini useRef tidak.

• Storan: Gunakan useRef untuk nilai yang tidak menjejaskan pemaparan komponen, manakala useState harus digunakan untuk nilai yang melakukannya.

Perkara Utama yang Perlu Diingati

• useRef boleh menyimpan sebarang nilai, bukan sekadar elemen DOM.
• Harta semasa boleh dikemas kini secara bebas tanpa menyebabkan paparan semula.
• Sesuai untuk mengakses nod DOM atau menyimpan nilai boleh ubah yang tidak perlu mencetuskan pemaparan.

Dengan memahami konsep ini, anda boleh menggunakan cangkuk useRef dengan berkesan dalam aplikasi React anda! Jika anda mempunyai sebarang kes penggunaan khusus atau soalan tentang useRef, jangan ragu untuk bertanya!

Atas ialah kandungan terperinci useRef Hook Dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!