Menguruskan Keadaan dalam React dengan useRef

Apabila membina aplikasi React, mengurus keadaan ialah aspek asas. Walaupun kebanyakan pembangun biasa dengan useState, cangkuk useRef sering terbang di bawah radar. Dalam blog ini, kami akan meneroka cara useRef boleh menjadi alat yang berkuasa dalam mengurus keadaan dan memahami kes penggunaan uniknya.

Apakah useRef?

Kait useRef mengembalikan objek ref boleh ubah yang sifat .currentnya dimulakan kepada hujah yang diluluskan. Objek ref ini kekal sepanjang hayat komponen sepenuhnya. Tidak seperti keadaan, menukar ref tidak menyebabkan pemaparan semula komponen.

Mengapa Menggunakan useRef?

Mengakses Elemen DOM: useRef biasanya digunakan untuk mengakses terus elemen DOM, membolehkan anda memanipulasinya tanpa menyebabkan pemaparan semula.
Menyimpan Nilai Boleh Berubah: Anda boleh menggunakan useRef untuk menyimpan nilai yang tidak memerlukan pemaparan semula apabila dikemas kini, seperti pemasa atau nilai keadaan sebelumnya.

Contoh: Mengurus Negeri dengan useRef

Mari lihat cara useRef boleh digunakan untuk mengurus keadaan dalam contoh kaunter yang mudah. Contoh ini akan menunjukkan cara untuk menambah pembilang tanpa menyebabkan pemaparan semula yang tidak perlu.

Langkah demi Langkah Pelaksanaan

import React, { useRef } from 'react';

function Counter() {
    // Create a ref to hold the count
    const countRef = useRef(0);

    const increment = () => {
        countRef.current += 1; // Increment the count
        alert(`Current Count: ${countRef.current}`); // Show the current count
    };

    return (
        <div>
            <h1>Counter Example</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

Pecahan Kod

Mencipta Rujukan: Kami memulakan countRef menggunakan useRef(0). Ini menetapkan kiraan awal kepada 0.
Menambah Kiraan: Dalam fungsi kenaikan, kami mengemas kini terus countRef.current. Ini tidak mencetuskan pemaparan semula, yang cekap untuk prestasi.
Maklum Balas Pengguna: Makluman menunjukkan kiraan semasa setiap kali butang diklik.

Bila Menggunakan useRef Over useState

Prestasi: Jika anda perlu menyimpan nilai tanpa menyebabkan pemaparan semula, useRef ialah cara yang perlu dilakukan. Ini amat berguna untuk aplikasi sensitif prestasi.
Keadaan Bukan UI: Gunakan useRef untuk nilai yang tidak berkaitan secara langsung dengan pemaparan, seperti pemasa, selang waktu atau rujukan elemen borang.

Kesimpulan

Walaupun useState penting untuk mengurus keadaan yang mempengaruhi pemaparan, useRef menyediakan alternatif yang ringan untuk mengurus nilai boleh ubah tanpa mencetuskan pemaparan semula. Memahami masa untuk menggunakan useRef boleh membantu anda menulis komponen React yang lebih cekap dan berkesan.

Jadi lain kali anda bekerja dengan keadaan dalam React, pertimbangkan sama ada useRef mungkin alat yang sesuai untuk tugas itu! Selamat mengekod!

Atas ialah kandungan terperinci Menguruskan Keadaan dalam React dengan useRef. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!