Tulis cangkuk tersuai untuk menjejaki saiz tetingkap dan mengemas kini komponen apabila ia berubah.

Tulis cangkuk tersuai untuk menjejaki saiz tetingkap dan kemas kini komponen apabila ia berubah.

Untuk membuat cangkuk tersuai yang menjejaki saiz tetingkap dan mengemas kini komponen apabila ia berubah, kami akan menggunakan cangkuk useState dan useEffect dalam React. Berikut adalah pendekatan langkah demi langkah untuk melaksanakan cangkuk ini:

 <code class="javascript">import { useState, useEffect } from 'react'; function useWindowSize() { // Initialize state with undefined width/height so server-side render works const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { // Handler to call on window resize function handleResize() { // Set window width/height to state setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); } // Add event listener window.addEventListener("resize", handleResize); // Call handler right away so state gets updated with initial window size handleResize(); // Remove event listener on cleanup return () => window.removeEventListener("resize", handleResize); }, []); // Empty array ensures that effect is only run on mount return windowSize; } export default useWindowSize;</code>

Cangkuk tersuai ini, useWindowSize , menggunakan cangkuk useState untuk menguruskan keadaan saiz tingkap dan cangkuk useEffect untuk menubuhkan dan membersihkan pendengar acara untuk acara saiz semula tingkap. Cangkuk mengembalikan saiz tetingkap semasa, yang boleh digunakan dalam mana -mana komponen yang mengimport dan menggunakan cangkuk ini.

Bagaimanakah saya boleh melaksanakan cangkuk tersuai untuk memantau perubahan saiz tetingkap dalam masa nyata?

Untuk melaksanakan cangkuk tersuai untuk pemantauan saiz tetingkap perubahan dalam masa nyata, ikuti langkah-langkah ini:

1. Import cangkuk yang diperlukan : Mulakan dengan mengimport useState dan useEffect dari React, kerana ini adalah penting untuk menguruskan kesan negeri dan sampingan.
2. Inisialisasi Negeri : Gunakan useState untuk memulakan keadaan dengan width dan height yang ditetapkan kepada undefined . Ini membolehkan cangkuk berfungsi dengan betul semasa rendering sisi pelayan di mana window mungkin tidak tersedia.
3. Buat pengendali saiz semula : Tentukan fungsi handleResize yang mengemas kini keadaan dengan window.innerWidth semasa.InnerWidth dan window.innerHeight .
4. Sediakan pendengar acara : Di dalam useEffect , tambahkan pendengar acara ke objek window untuk acara resize . Pendengar ini akan memanggil handleResize setiap kali tetingkap diubahsuai.
5. Panggilan Awal : Segera hubungi handleResize dalam useEffect untuk menetapkan saiz tetingkap awal.
6. Pembersihan : Kembalikan fungsi pembersihan dari useEffect yang menghilangkan pendengar acara apabila komponen yang tidak dapat dielakkan atau kesannya berjalan semula.
7. Kembali Negeri : Akhirnya, kembalikan keadaan windowSize dari cangkuk supaya ia boleh digunakan dalam komponen.

Pendekatan ini memastikan bahawa cangkuk mengemas kini saiz tetingkap dalam masa nyata dan membersihkan sumber dengan sewajarnya.

Apakah amalan terbaik untuk menggunakan cangkuk tersuai untuk mengemas kini komponen dengan cekap berdasarkan saiz tetingkap?

Apabila menggunakan cangkuk tersuai untuk mengemas kini komponen berdasarkan saiz tetingkap, pertimbangkan amalan terbaik berikut:

1. Mengoptimumkan Prestasi : Gunakan useMemo atau useCallback untuk memoize pengiraan mahal atau fungsi panggil balik yang bergantung pada saiz tetingkap. Ini menghalang pelaku semula yang tidak perlu.
2. Debounce acara saiz semula : Untuk mengelakkan kemas kini yang berlebihan semasa saiz semula pesat, pertimbangkan untuk menyebarkan pengendali acara saiz semula. Perpustakaan seperti lodash.debounce boleh berguna untuk tujuan ini.
3. Rendering bersyarat : Gunakan saiz tetingkap untuk membuat susun atur atau komponen yang berbeza. Ini dapat meningkatkan pengalaman pengguna dengan menyesuaikan UI ke saiz skrin yang berbeza.
4. Keserasian Rendering Sider Server : Pastikan cangkuk anda berfungsi dengan rendering sisi pelayan dengan memulakan keadaan dengan nilai undefined dan memeriksa kewujudan window sebelum mengaksesnya.
5. Pembersihan : Sentiasa membersihkan pendengar acara dalam fungsi pembersihan useEffect untuk mengelakkan kebocoran memori.
6. Kebolehgunaan semula : Reka bentuk cangkuk anda untuk diguna semula di pelbagai komponen dan projek. Pastikan ia memberi tumpuan kepada satu tanggungjawab (dalam kes ini, mengesan saiz tetingkap).
7. Ujian : Tulis ujian untuk cangkuk tersuai anda untuk memastikan ia bertindak dengan betul di bawah pelbagai keadaan, termasuk saiz tetingkap yang berbeza dan semasa peristiwa kitaran hayat komponen.

Bolehkah anda memberikan contoh bagaimana untuk mengintegrasikan cangkuk penjejakan saiz tingkap ke dalam komponen React yang sedia ada?

Berikut adalah contoh bagaimana untuk mengintegrasikan cangkuk useWindowSize ke dalam komponen React yang sedia ada:

 <code class="jsx">import React from 'react'; import useWindowSize from './useWindowSize'; // Assuming the hook is in a separate file function MyComponent() { const { width, height } = useWindowSize(); return ( <div> <h1 id="Current-Window-Size">Current Window Size</h1> <p>Width: {width}px</p> <p>Height: {height}px</p> {width > 768 ? ( <p>This is a wide screen layout</p> ) : ( <p>This is a narrow screen layout</p> )} </div> ); } export default MyComponent;</code>

Dalam contoh ini, MyComponent menggunakan cangkuk useWindowSize untuk mendapatkan dimensi tetingkap semasa. Ia kemudian memaparkan dimensi ini dan menggunakannya untuk menjadikan kandungan yang berbeza berdasarkan lebar tetingkap. Ini menunjukkan bagaimana cangkuk dapat dengan mudah diintegrasikan ke dalam komponen untuk mengemas kini UI secara dinamik berdasarkan saiz tetingkap.

Atas ialah kandungan terperinci Tulis cangkuk tersuai untuk menjejaki saiz tetingkap dan mengemas kini komponen apabila ia berubah.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!