Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

useEffect adalah cangkuk dalam React yang digunakan untuk mengendalikan kesan sampingan dalam komponen berfungsi. Kesan sampingan adalah operasi yang mempengaruhi sesuatu di luar skop komponen, seperti pengambilan data, menubuhkan langganan, atau mengubah DOM secara manual. useEffect membolehkan anda menjalankan kesan sampingan ini selepas rendering, dan ia boleh digunakan untuk menyegerakkan komponen anda dengan sistem luaran.

Untuk menggunakan useEffect , anda biasanya lulus dalam fungsi yang merangkumi kod kesan sampingan. Fungsi ini akan dipanggil selepas setiap render secara lalai, tetapi anda boleh mengawal apabila ia dipanggil dengan meluluskan array ketergantungan sebagai hujah kedua untuk useEffect .

Berikut adalah contoh asas cara menggunakan useEffect :

 <code class="javascript">import React, { useEffect, useState } from 'react'; function MyComponent() { const [data, setData] = useState([]); useEffect(() => { // This is the side effect fetch('/api/data') .then(response => response.json()) .then(data => setData(data)); }, []); // Empty dependency array means this effect runs once on mount return ( <div> {data.map(item => ( <div key="{item.id}">{item.name}</div> ))} </div> ); }</code>

Dalam contoh ini, useEffect digunakan untuk mengambil data dari API apabila komponen dipasang. Arahan ketergantungan kosong [] memastikan kesannya hanya berjalan sekali, pada permulaan awal.

Bilakah anda harus menggunakan useeffect dalam komponen React anda?

Anda harus menggunakan useEffect dalam komponen React anda apabila anda perlu melakukan operasi yang tidak berkaitan secara langsung dengan rendering komponen itu sendiri. Operasi ini termasuk, tetapi tidak terhad kepada:

• Mengambil data dari API
• Menyediakan langganan atau pendengar acara
• Memanipulasi dom secara manual
• Membersihkan sumber, seperti berhenti berlangganan dari peristiwa atau pemasa

useEffect amat berguna untuk melaksanakan operasi ini selepas membuat komponen awal atau sebagai tindak balas kepada perubahan keadaan tertentu. Anda boleh menentukan apabila kesannya perlu dijalankan dengan meluluskan pelbagai ketergantungan sebagai hujah kedua kepada useEffect . Contohnya:

• Jika anda mahu kesan hanya berjalan sekali selepas render awal, lulus array kosong [] .
• Jika anda mahu kesan untuk dijalankan apabila perubahan keadaan atau prop tertentu, sertakan pembolehubah tersebut dalam pelbagai ketergantungan.

Apakah kesan sampingan biasa yang boleh diuruskan dengan useeffect?

Kesan sampingan biasa yang boleh diuruskan dengan useEffect termasuk:

1. Pengambilan data : Anda boleh menggunakan useEffect untuk mengambil data dari API atau pangkalan data apabila komponen dipasang atau apabila alat peraga atau perubahan keadaan tertentu. Ini memastikan bahawa data komponen anda terkini.

    <code class="javascript">useEffect(() => { fetchData(); }, [someDependency]);</code>

2. Menyediakan langganan : Jika komponen anda perlu bertindak balas terhadap perubahan dalam sumber data luaran, anda boleh menggunakan useEffect untuk menyediakan langganan.

    <code class="javascript">useEffect(() => { const subscription = someExternalDataSource.subscribe(handleChange); return () => subscription.unsubscribe(); }, []);</code>

3. Secara manual mengubah DOM : Kadang -kadang, anda mungkin perlu berinteraksi dengan DOM secara langsung, misalnya, untuk menetapkan fokus pada medan input.

    <code class="javascript">useEffect(() => { inputRef.current.focus(); }, []);</code>

4. Pemasa : Menyediakan dan membersihkan pemasa, seperti setTimeout atau setInterval , boleh diuruskan dengan useEffect .

    <code class="javascript">useEffect(() => { const timer = setTimeout(someFunction, 1000); return () => clearTimeout(timer); }, []);</code>

Bagaimanakah anda dapat memastikan pembersihan yang betul dengan useeffect?

Memastikan pembersihan yang betul dengan useEffect adalah penting untuk mengelakkan kebocoran ingatan dan operasi yang tidak perlu, terutamanya apabila berurusan dengan langganan atau pemasa. Untuk melakukan pembersihan, anda mengembalikan fungsi dari panggil balik useEffect . Fungsi pembersihan ini akan dipanggil apabila komponen akan dibatalkan atau sebelum kesannya berjalan semula kerana perubahan ketergantungan.

Inilah contoh cara melaksanakan pembersihan:

 <code class="javascript">import React, { useEffect, useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { setCount(prevCount => prevCount 1); }, 1000); // Cleanup function return () => { clearInterval(timer); }; }, []); // Empty dependency array ensures this effect runs once on mount return ( <div> <h1>Count: {count}</h1> </div> ); }</code>

Dalam contoh ini, useEffect menetapkan selang yang meningkatkan kaunter setiap saat. Fungsi pembersihan clearInterval(timer) memastikan bahawa selang itu dibersihkan apabila komponen tidak dapat diatasi atau apabila kesannya dijalankan semula disebabkan oleh perubahan ketergantungan. Ini menghalang selang dari terus berjalan di latar belakang, yang boleh menyebabkan kebocoran memori atau tingkah laku yang tidak dijangka.

Atas ialah kandungan terperinci Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!