Apabila membangunkan aplikasi moden, terutamanya apl web, anda selalunya perlu mengurus data yang berubah dari semasa ke semasa. Contohnya, jika pengguna mengklik butang, kami mungkin ingin mengemas kini paparan atau mengambil data baharu daripada pelayan. Cangkuk seperti useState dan useEffect membantu kami mengendalikan perkara ini dengan lancar. Mari kita pecahkan cara konsep ini berfungsi dan terokai cara mereka bentuknya langkah demi langkah.
Untuk menjadikan panduan ini mudah difahami, kami akan memecahkan setiap cangkuk kepada logik pentingnya dan membina dari sana.
Bayangkan anda mempunyai apl kaunter yang mudah. Setiap kali anda menekan butang, nombor itu meningkat sebanyak 1. Untuk membuat ini berfungsi, anda perlu menyimpan kiraan semasa di suatu tempat dan mengemas kininya setiap kali butang itu diklik.
useState hendaklah:
Berikut ialah pecahan asas tentang cara useState mungkin berfungsi di bawah hud:
Mari kita tentukan struktur ringkas untuk digunakanState:
Begini rupa versi mudah useState:
function useState(initialValue) { // Step 1: Create a variable to hold the current state value let currentState = initialValue; // Step 2: Define a function to update this value function setState(newValue) { // Update the state currentState = newValue; // Simulate a re-render (you’d do this differently in a real application) render(); } // Step 3: Return the state and the function to update it return [currentState, setState]; } // Usage example: const [count, setCount] = useState(0); console.log(count); // Outputs: 0 setCount(1); // Updates state to 1 console.log(count); // Outputs: 1 (in real use, this would trigger re-rendering)
Semasa useState mengendalikan data setempat, useEffect membenarkan kami melakukan "kesan sampingan", seperti mengambil data atau mengemas kini tajuk dokumen. Kesan sampingan ialah sebarang interaksi dengan dunia luar.
useEffect hendaklah:
Bahagian utama penggunaanEffect ialah:
Mari kita sediakan struktur ringkas untuk kegunaanKesan:
Berikut ialah versi asas useEffect:
let previousDeps; // To store previous dependencies function useEffect(effectFunction, dependencies) { // Step 1: Check if dependencies have changed const hasChanged = dependencies ? !previousDeps || dependencies.some((dep, i) => dep !== previousDeps[i]) : true; // Step 2: Run the effect function if dependencies changed if (hasChanged) { effectFunction(); previousDeps = dependencies; // Update the previous dependencies } } // Usage example: useEffect(() => { console.log("Effect has run!"); // Simulate cleanup if needed return () => console.log("Cleanup effect!"); }, [/* dependencies */]);
Mari kita simulasi komponen menggunakan useState dan useEffect.
function Component() { // Initialize state with useState const [count, setCount] = useState(0); // Log a message each time count changes with useEffect useEffect(() => { console.log(`Count has changed to: ${count}`); }, [count]); // Re-run effect if count changes // Simulate user interaction setCount(count + 1); }
Dalam contoh ini:
Merancang useState dan useEffect melibatkan:
Cakuk ini membantu anda membina aplikasi dinamik dan interaktif, sama ada untuk kaunter mudah, mengambil data atau pengurusan keadaan yang lebih kompleks. Dengan asas dalam cangkuk ini, anda serba lengkap untuk mencipta apl yang bertindak balas terhadap tindakan pengguna dan perubahan data masa nyata!
Atas ialah kandungan terperinci Cara Reka Bentuk useState dan useEffect Hooks: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!