Menguasai React's useRef Hook: Bekerja dengan DOM dan Nilai Boleh Berubah

gunakanRef Hook dalam React

Cakuk useRef ialah cangkuk React terbina dalam yang digunakan untuk mengekalkan nilai merentas pemaparan tanpa menyebabkan pemaparan semula. Ia sering digunakan untuk berinteraksi dengan elemen DOM secara langsung dan untuk menyimpan nilai yang perlu berterusan antara pemaparan tetapi tidak semestinya perlu mencetuskan pemaparan semula.

---

Apakah useRef?

Kail useRef digunakan terutamanya untuk dua tujuan:

1. Mengakses elemen DOM: Ia menyediakan cara untuk merujuk nod DOM atau elemen React secara langsung, membolehkan anda berinteraksi dengannya secara penting.
2. Nilai berterusan merentas pemaparan: Ia boleh menyimpan nilai boleh ubah yang tidak akan mencetuskan pemaparan semula apabila dikemas kini, tidak seperti keadaan.

---

Sintaks useRef

const myRef = useRef(initialValue);

• myRef: Objek rujukan yang dicipta oleh useRef.
• initialValue: Nilai awal untuk disimpan dalam objek rujukan. Ini boleh jadi apa sahaja, seperti nod DOM, objek atau nilai primitif.

Objek rujukan yang dikembalikan oleh useRef mempunyai sifat semasa, di mana nilai sebenar disimpan.

---

Cara penggunaanRef Berfungsi

1. Mengakses Elemen DOM: Anda boleh menggunakan useRef untuk mendapatkan akses terus kepada elemen DOM dalam komponen berfungsi, sama seperti atribut ref dalam komponen kelas.

   const MyComponent = () => {
     const inputRef = useRef(null);

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

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

• Di sini, inputRef digunakan untuk merujuk elemen dan fungsi fokusInput memfokus pada elemen input apabila butang diklik.

1. Menyimpan Nilai Boleh Berubah Merentasi Render: Anda boleh menggunakan useRef untuk menyimpan nilai yang berterusan merentas pemaparan tetapi tidak mencetuskan pemaparan semula apabila diubah.

   const TimerComponent = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

• Dalam contoh ini, countRef menyimpan nilai boleh ubah. Nilai boleh dikemas kini tanpa menyebabkan pemaparan semula, tidak seperti useState, yang mencetuskan pemaparan semula.

---

Kes Penggunaan Biasa PenggunaanRef

1. Mengakses Elemen DOM: Contohnya, memfokuskan medan input, menatal ke elemen tertentu atau mengukur saiz elemen.

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref={topRef}>



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• Penjelasan: prevCountRef menyimpan nilai kiraan sebelumnya, yang boleh diakses tanpa mencetuskan pemaparan semula.

1. Mengelakkan Paparan Semula untuk Nilai Kompleks: Jika anda mempunyai objek besar atau struktur data kompleks yang tidak perlu mencetuskan pemaparan semula, useRef boleh menyimpannya tanpa menjejaskan komponen prestasi.

2. Selang Penjejakan atau Tamat Masa: Anda boleh menyimpan ID tamat masa atau selang untuk mengosongkannya kemudian.
   

const myRef = useRef(initialValue);

• Penjelasan: intervalRef menyimpan ID selang, dan ia boleh digunakan untuk mengosongkan selang apabila komponen dinyahlekap.

---

Perbezaan Utama Antara useRef dan useState

Ciri useRef useState

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

Pencetus pemaparan semula Tidak (tidak mencetuskan pemaparan semula) Ya (mencetuskan pemaparan semula apabila keadaan berubah) Kes Penggunaan Menyimpan nilai boleh ubah atau rujukan DOM Keadaan penyimpanan yang mempengaruhi pemaparan Storan nilai Disimpan dalam harta semasa Disimpan dalam pembolehubah keadaan Kegigihan merentas pemaparan Ya (mengekalkan nilai merentas pemaparan tanpa mencetuskan pemaparan semula) Ya (tetapi mencetuskan pemaparan semula apabila dikemas kini)

---

Contoh: Menggunakan useRef untuk Pengesahan Borang

Berikut ialah contoh di mana useRef digunakan untuk pengesahan borang, memfokuskan pada medan input apabila ia tidak sah.

import React, { useRef, useState } daripada 'react';

const FormComponent = () => {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [ralat, setError] = useState('');

  const validateInput = () => {
    jika (inputValue === '') {
      setError('Input tidak boleh kosong');
      inputRef.current.focus(); // Fokuskan elemen input
    } lain {
      setError('');
    }
  };

  kembali (
    <div>
      <masukan
        ref={inputRef}
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      {ralat && <p>

• Penjelasan:
  • InputRef digunakan untuk memfokus pada elemen input jika nilai input kosong.
  • Fungsi ini tidak akan dapat dilakukan dengan useState kerana memfokuskan pada elemen DOM memerlukan akses terus kepada elemen, yang tidak dapat diberikan oleh useState.

---

Ringkasan penggunaanRef Hook

• useRef digunakan untuk menyimpan rujukan kepada elemen DOM dan nilai boleh ubah yang tidak mencetuskan pemaparan semula apabila dikemas kini.
• Ia berguna untuk mengakses nod DOM secara langsung (cth., untuk memfokus, menatal atau animasi).
• useRef juga berguna untuk menyimpan nilai yang berterusan merentas pemaparan tanpa perlu mencetuskan pemaparan semula, seperti menjejak nilai sebelumnya atau menyimpan ID tamat masa/selang.
• Perbezaan Utama: Tidak seperti useState, mengemas kini useRef tidak mencetuskan pemaparan semula.

---

Kesimpulan

Kail useRef sangat berguna untuk menangani nilai boleh ubah dan manipulasi DOM langsung dalam React. Sama ada anda bekerja dengan elemen borang, menjejaki keadaan sebelumnya atau berinteraksi dengan perpustakaan pihak ketiga, useRef menyediakan penyelesaian yang bersih dan cekap. Dengan menggunakan useRef, anda boleh mengekalkan kegigihan tanpa mencetuskan pemaparan semula yang tidak perlu, yang menjadikannya pilihan terbaik untuk operasi sensitif prestasi.

---

Atas ialah kandungan terperinci Menguasai React's useRef Hook: Bekerja dengan DOM dan Nilai Boleh Berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!