Cara menggunakan Intersection Observer dalam React

Hari ini kita akan meneroka cara menggunakan API pemerhati persimpangan dalam React dengan beberapa contoh.

Dokumentasi web Mozilla menerangkan API pemerhati persimpangan sebagai:

membenarkan kod untuk mendaftarkan fungsi panggil balik yang berjalan apabila elemen yang mereka mahu pantau memasuki atau meninggalkan elemen lain (atau port pandangan), atau apabila nilai yang kedua-duanya bersilang menukar jumlah yang diminta. Dengan cara ini, tapak tidak lagi perlu melakukan apa-apa pada utas utama untuk memerhati jenis persilangan unsur ini dan penyemak imbas bebas untuk mengoptimumkan pengurusan persimpangan seperti yang difikirkan patut.

Ringkasnya, ia membolehkan kami mengesan apabila elemen tertentu kelihatan dalam port pandangan, ini hanya berlaku apabila elemen itu memenuhi nisbah persilangan yang diingini.

Seperti yang anda lihat, jika anda menatal ke bawah halaman nisbah persilangan akan meningkat sehingga mencapai had yang diunjurkan dan pada masa itu fungsi yang melaksanakan panggilan balik dicetuskan.

---

Langkah pertama

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

Objek pembina pemerhati persimpangan memerlukan dua hujah:

1. Fungsi panggil balik
2. Pilihan

Itu sahaja, kami bersedia untuk melihat beberapa tindakan, tetapi pertama, kami perlu mengetahui maksud setiap pilihan, hujah pilihan ialah objek dengan nilai berikut:

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root: Elemen yang digunakan sebagai viewport untuk menyemak keterlihatan sasaran. Mesti moyang sasaran. Lalai kepada port pandangan penyemak imbas jika tidak dinyatakan atau batal.
• rootMargin: Set nilai ini digunakan untuk menambah atau mengurangkan setiap sisi kotak sempadan elemen akar sebelum mengira persimpangan, pilihannya adalah serupa dengan margin dalam CSS.
• ambang: Nombor tunggal atau tatasusunan nombor yang menunjukkan pada peratusan keterlihatan sasaran panggilan balik pemerhati harus dijalankan, berjulat dari 0 hingga 1.0, di mana 1.0 bermakna setiap piksel kelihatan dalam port pandangan.

---

Menggunakan dalam React

Sekarang kita akan melihat pelaksanaan API pemerhati persimpangan dalam React.

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. Mulakan dengan merujuk kepada elemen yang ingin kita perhatikan, gunakan react hook useRef.
2. Buat pembolehubah keadaan isVisible, kami akan menggunakannya untuk memaparkan mesej apabila kotak kami berada dalam port pandangan.
3. Isytiharkan fungsi panggil balik yang akan menerima tatasusunan IntersectionObserverEntries sebagai parameter, dalam fungsi ini kami mengambil entri pertama dan satu-satunya dan menyemak sama ada ia bersilang dengan viewport dan jika ia maka kami memanggil setIsVisible dengan nilai masukan .adalah Bersilang (benar / SALAH).
4. Buat objek pilihan dengan nilai yang sama seperti imej.
5. Tambah cangkuk useEffect react dan buat pembina pemerhati menggunakan fungsi panggil balik dan pilihan yang baru kami buat sebelum ini. Ia adalah pilihan dalam kes kami, tetapi ia boleh mengembalikan fungsi pembersihan untuk menyahpantau sasaran kami apabila komponen dinyahlekapkan.
6. Tetapkan pembolehubah useRef pada elemen yang ingin kita perhatikan.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. Jom tambah gaya pada html ini.

1. Itu sahaja yang kami perlukan, ringkas dan mudah!

Ingat, ini hanyalah pelaksanaan asas dan terdapat beberapa cara untuk melakukannya.

---

Sekarang kami akan melaksanakan kod yang sama seperti yang kami lakukan sebelum ini, tetapi memisahkan semua logik dalam cangkuk nu dipanggil useElementOnScreen.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

1. Buat fungsi baharu yang dipanggil useElementOnScreen dengan pilihan parameter
2. Alihkan keseluruhan useRef, useState dan useEffect ke dalam cangkuk baharu kami.
3. Kini satu-satunya perkara yang hilang daripada cangkuk kami ialah penyata pulangan, kami lulus isVisible dan containerRef sebagai tatasusunan.
4. ok, kita hampir sampai, kita hanya perlu memanggilnya dalam komponen kita dan lihat sama ada ia berfungsi!

<div className="box" ref={containerRef}>Observe me</div>

1- Import cangkuk yang baru dibuat ke dalam komponen kami.
2 - Mulakan dengan objek pilihan.
3 - Beginilah cara kami menyelesaikannya.

Tahniah, kami telah berjaya menggunakan API pemerhati persimpangan dan juga mencipta cangkuk untuknya!

---

Kredit

Pemerhati Persimpangan menggunakan React, asalnya ditulis oleh penggodam produk

Terima kasih kerana membaca artikel ini. Saya harap saya dapat memberikan anda beberapa maklumat yang berguna. Jika ya, saya sangat gembira jika anda mengesyorkan siaran ini dan klik butang ♥ supaya lebih ramai orang dapat melihatnya.

Atas ialah kandungan terperinci Cara menggunakan Intersection Observer dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!