React's useEffect Hook Ringkas: Urus Kesan Sampingan Seperti Pro

Memahami useEffect dalam React: From Zero to Hero

React telah menjadi salah satu perpustakaan JavaScript paling popular untuk membina antara muka pengguna dinamik. Salah satu cangkuk paling penting dalam React ialah useEffect, yang membolehkan pembangun mengurus kesan sampingan dalam komponen berfungsi. Kesan sampingan termasuk operasi seperti mengambil data, menyediakan langganan atau memanipulasi DOM secara manual. Dalam blog ini, kami akan menyelami lebih mendalam tentang kegunaan useEffect, cara ia berfungsi dan memberikan contoh langkah demi langkah untuk pemahaman yang lebih baik.

Apakah useEffect?

Dalam React, useEffect ialah cangkuk terbina dalam yang membolehkan anda melakukan kesan sampingan dalam komponen fungsi. Kesan sampingan, seperti namanya, ialah operasi yang mempengaruhi sesuatu di luar fungsi, seperti panggilan API, pemasa, pengelogan atau mengemas kini DOM.

Sebelum pengenalan cangkuk dalam React 16.8, anda perlu menggunakan komponen kelas dan kaedah kitaran hayat seperti componentDidMount, componentDidUpdate dan componentWillUnmount untuk mengendalikan kesan sampingan. Kini, dengan useEffect, peristiwa kitaran hayat ini digabungkan menjadi satu fungsi untuk komponen berfungsi.

Mengapa Memilih useEffect?

useEffect ialah cangkuk yang berkuasa untuk menguruskan kesan sampingan dalam React atas beberapa sebab:

1. Pemudahan Kod: Ia menghapuskan keperluan untuk komponen berasaskan kelas dan kaedah kitaran hayat, membolehkan anda menulis kod berasaskan fungsi yang lebih bersih.
2. Kesan Sampingan Berpusat: Anda boleh mengurus semua kesan sampingan, seperti mengambil data atau mengemas kini DOM, di satu tempat.
3. Kebolehbacaan yang Dipertingkat: Ia menyelaraskan cara acara kitaran hayat diurus, menjadikan kod lebih mudah dibaca dan kurang kompleks.
4. Fleksibiliti: Dengan useEffect, anda mempunyai lebih kawalan ke atas masa dan kekerapan kesan sampingan dilaksanakan, kerana anda boleh mentakrifkan kebergantungan yang menentukan bila kesan itu harus dijalankan.

Bagaimana Ia Berfungsi?

Kait useEffect menerima dua hujah:

1. Fungsi kesan: Fungsi ini mengandungi logik kesan sampingan, seperti mengambil data atau menyediakan langganan.
2. Susun atur kebergantungan (pilihan): Tatasusunan nilai yang menentukan bila kesan harus dijalankan semula. Jika sebarang nilai dalam tatasusunan kebergantungan berubah, kesannya akan dilaksanakan semula. Jika anda meninggalkan tatasusunan ini, kesannya akan dijalankan selepas setiap pemaparan.

Berikut ialah struktur asas:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Contoh:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return <div>{data ? data.title : 'Loading...'}</div>;
}

Dalam contoh ini, data diambil daripada API apabila komponen pertama kali dipaparkan dan hasilnya dipaparkan dalam UI. Memandangkan kami melepasi tatasusunan kebergantungan kosong, kesan ini berjalan sekali sahaja selepas pemaparan pertama.

Mengawal Kesan Sampingan dalam useEffect

Dengan mengawal apabila useEffect berjalan, kami boleh mengoptimumkan prestasi dan memastikan kesan sampingan berlaku pada masa yang betul.

Kesan Tanpa Pembersihan

Bukan semua kesan memerlukan pembersihan. Pembersihan hanya perlu apabila anda perlu mengalih keluar atau menetapkan semula sesuatu selepas kesannya dilaksanakan, seperti mengosongkan pemasa atau menyahlanggan daripada aliran data.

Sebagai contoh, berikut ialah senario di mana tiada pembersihan diperlukan:

import React, { useState, useEffect } from 'react';

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Dalam kes ini, kesan berlaku setiap kali keadaan kiraan berubah. Memandangkan kami tidak menyediakan langganan atau mengurus sumber luaran, tiada pembersihan diperlukan.

Kesan dengan Pembersihan

Jika kesan anda melibatkan penyediaan langganan atau pemasa, anda mungkin perlu membersihkannya selepas kesan itu. Sebagai contoh, bayangkan senario di mana kita ingin menyediakan pemasa:

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return <div>{time} seconds have passed</div>;
}

Berikut ialah perkara yang berlaku:

1. Fungsi setInterval menyediakan pemasa yang menambah masa setiap saat.
2. Fungsi pembersihan (dikembalikan melalui useEffect) mengosongkan selang apabila komponen dinyahlekap. Ini memastikan pemasa tidak terus berjalan selepas komponen dialih keluar.

Contoh Senario Kesan Penggunaan

Mari kita terokai beberapa senario biasa di mana useEffect amat berguna.

Mengambil Data pada Component Mount

Mengambil data apabila komponen dipasang ialah salah satu kes penggunaan yang paling biasa untuk useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Mengemas kini DOM

Anda boleh menggunakan useEffect untuk memanipulasi DOM secara manual selepas pemaparan, walaupun ini perlu dilakukan dengan berhati-hati kerana React menguruskan DOM dengan cekap.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Pembersihan pada Komponen Nyahlekap

Jika anda mempunyai sumber seperti langganan atau pendengar acara yang perlu dibersihkan, anda boleh menggunakan fungsi pulangan dalam useEffect untuk mengendalikan perkara ini.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

FAQs

1. What happens if I omit the dependency array in useEffect?

If you omit the dependency array, useEffect will run after every render, which can cause performance issues for expensive side effects like API calls.

2. Can I run useEffect only once?

Yes, passing an empty dependency array [] ensures that the effect runs only once after the component mounts.

3. What is the cleanup function in useEffect?

The cleanup function is a way to undo the effect when the component unmounts or before the effect runs again. It’s useful for cleaning up timers, event listeners, or subscriptions.

---

In conclusion, useEffect is a powerful and flexible hook that simplifies managing side effects in React. By controlling when side effects run and cleaning up when necessary, you can optimize your components and avoid unnecessary re-renders or memory leaks. Experiment with the examples above to master the art of side effect management!

Atas ialah kandungan terperinci React's useEffect Hook Ringkas: Urus Kesan Sampingan Seperti Pro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!