Schreiben Sie einen benutzerdefinierten Hook, um die Fenstergröße zu verfolgen und eine Komponente zu aktualisieren, wenn sie sich ändert.

Schreiben Sie einen benutzerdefinierten Hook, um die Fenstergröße zu verfolgen und eine Komponente zu aktualisieren, wenn sie sich ändert.

Um einen benutzerdefinierten Haken zu erstellen, der die Fenstergröße verfolgt und eine Komponente beim Ändern aktualisiert, verwenden wir das useState und useEffect -Hooks in React. Hier finden Sie einen Schritt-für-Schritt-Ansatz zur Implementierung dieses Hakens:

 <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>

Dieser benutzerdefinierte Haken, useWindowSize , verwaltet den useState -Hook, um den Status der Fenstergröße und den useEffect -Haken zu verwalten, um den Ereignishörer für die Größe des Fensters zu richten und zu bereinigen. Der Haken gibt die aktuelle Fenstergröße zurück, die in jeder Komponente verwendet werden kann, die diesen Haken importiert und verwendet.

Wie kann ich einen benutzerdefinierten Hook implementieren, um Änderungen der Fenstergröße in Echtzeit zu überwachen?

Um einen benutzerdefinierten Hook für Änderungen der Fenstergröße in Echtzeit zu implementieren, befolgen Sie diese Schritte:

1. Notwendige Haken importieren : Beginnen Sie mit dem Importieren useState und useEffect von React, da diese für die Verwaltung von Zustand und Nebenwirkungen unerlässlich sind.
2. Status initialisieren : Verwenden Sie useState , um den Status mit width und height auf undefined zu initialisieren. Auf diese Weise kann der Haken während des serverseitigen Renders korrekt funktionieren, bei dem window möglicherweise nicht verfügbar ist.
3. Erstellen Sie einen Größen -Handler : Definieren Sie einen handleResize der den Status mit dem aktuellen window.innerWidth aktualisiert window.innerHeight
4. Event -Listener einrichten : Inside useEffect , fügen Sie dem window für das Ereignis resize einen Ereignishörer hinzu. Dieser Hörer ruft handleResize an, wenn das Fenster geändert wird.
5. Erstanruf : Rufen Sie sofort handleResize innerhalb von useEffect an, um die anfängliche Fenstergröße festzulegen.
6. Reinigung : Geben Sie eine Reinigungsfunktion von useEffect zurück, die den Ereignishörer entfernt, wenn sich die Komponente entfaltet oder der Effekt erneut ausgeführt wird.
7. Rückgabestatus : Geben Sie schließlich den windowSize -Status vom Haken zurück, damit er in Komponenten verwendet werden kann.

Dieser Ansatz stellt sicher, dass der Haken die Fenstergröße in Echtzeit aktualisiert und die Ressourcen entsprechend reinigt.

Was sind die besten Praktiken für die Verwendung eines benutzerdefinierten Hooks, um Komponenten basierend auf der Fenstergröße effizient zu aktualisieren?

Betrachten Sie bei Verwendung eines benutzerdefinierten Hooks, um Komponenten basierend auf der Fenstergröße zu aktualisieren, die folgenden Best Practices:

1. Leistung optimieren : Verwenden Sie useMemo oder useCallback um teure Berechnungen oder Rückruffunktionen zu meimen, die von der Fenstergröße abhängen. Dies verhindert unnötige Wiederverbesserer.
2. Debounce -Größen -Ereignisse : Um übermäßige Updates während der schnellen Änderung zu verhindern, sollten Sie den Event -Handler der Größe des Größengrößens entzünden. Bibliotheken wie lodash.debounce können für diesen Zweck nützlich sein.
3. Bedingte Rendering : Verwenden Sie die Fenstergröße, um verschiedene Layouts oder Komponenten bedingt zu rendern. Dies kann die Benutzererfahrung verbessern, indem die Benutzeroberfläche an verschiedene Bildschirmgrößen angepasst wird.
4. Server-Seite-Rendering-Kompatibilität : Stellen Sie sicher, dass Ihr Haken mit der Server-Seite-Rendering funktioniert, indem Sie den Status mit undefined Werten initialisieren und das Vorhandensein des window vor dem Zugriff überprüfen.
5. Aufräumarbeiten : Immer Ereignishörer in der useEffect Reinigungsfunktionen zur Verhinderung von Speicherlecks aufräumen.
6. Wiederverwendbarkeit : Entwerfen Sie Ihren Haken so, dass sie über verschiedene Komponenten und Projekte hinweg wiederverwendbar sind. Konzentrieren Sie sich auf eine einzelne Verantwortung (in diesem Fall verfolgte die Fenstergröße).
7. Testen : Schreiben Sie Tests für Ihren benutzerdefinierten Hook, um sicherzustellen, dass es sich unter verschiedenen Bedingungen korrekt verhält, einschließlich unterschiedlicher Fenstergrößen und während der Komponentenlebenszyklusereignisse.

Können Sie ein Beispiel dafür geben, wie Sie einen Fenstergrößen -Tracking -Haken in eine vorhandene React -Komponente integrieren können?

Hier ist ein Beispiel für die Integration des useWindowSize -Hakens in eine vorhandene React -Komponente:

 <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>

In diesem Beispiel verwendet MyComponent den useWindowSize -Hook, um die aktuellen Fensterabmessungen zu erhalten. Anschließend wird diese Dimensionen angezeigt und verwendet sie, um unterschiedliche Inhalte basierend auf der Fensterbreite zu rendern. Dies zeigt, wie der Haken leicht in eine Komponente integriert werden kann, um die Benutzeroberfläche basierend auf der Fenstergröße dynamisch zu aktualisieren.

Das obige ist der detaillierte Inhalt vonSchreiben Sie einen benutzerdefinierten Hook, um die Fenstergröße zu verfolgen und eine Komponente zu aktualisieren, wenn sie sich ändert.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!