Die Magie der React Hooks entschlüsseln

Transformieren Sie Ihren Webentwicklungs-Workflow mit diesen leistungsstarken Mustern

Die Einführung von Hooks in React 16.8 hat die Art und Weise revolutioniert, wie Entwickler Komponenten schreiben und Zustände in ihren Anwendungen verwalten. Vorbei sind die Zeiten, in denen man Klassenkomponenten verwenden musste, um zustandsbehaftete Logik zu handhaben. Mit Hooks können Sie nun Ihre gesamte Anwendung mit funktionalen Komponenten schreiben, was zu einem saubereren und besser lesbaren Code führt. In diesem Beitrag werden wir untersuchen, wie Sie React Hooks nutzen können, um Ihren Entwicklungsworkflow zu optimieren und einige leistungsstarke Muster einzuführen, die Ihren Code verändern können.

Grundlegende Hooks verstehen

Bevor wir in fortgeschrittene Muster eintauchen, lassen Sie uns die Grundlagen rekapitulieren. Die am häufigsten verwendeten Hooks sind useState und useEffect . Mit dem useState -Haken können Sie funktionalen Komponenten einen Zustand hinzufügen, während Sie mit useEffect Seiteneffekte ausführen können, wie z. B. das Abrufen von Daten oder das Abonnieren von Ereignissen.

<script type="text/babel">
function Beispiel() {
    const [count, setCount] = React.useState(0);

    React.useEffect(() => {
        document.title = `Sie haben ${count} mal geklickt`;
    });

    return (
        <div>
            <p>Du hast {count} mal geklickt</p>
            <button onClick={() => setCount(count + 1)}>
                Klick mich
            </button>
        </div>
    );
}
ReactDOM.render(<Beispiel />, document.getElementById('root'));
</script>

        

Im obigen Beispiel haben wir einen einfachen Zähler erstellt, der den Dokumententitel jedes Mal aktualisiert, wenn die Schaltfläche angeklickt wird. Der Zustand wird mit useState verwaltet, und der Seiteneffekt wird mit useEffect behandelt.

Custom Hooks: Wiederverwendung zustandsbehafteter Logik

Eine der mächtigsten Funktionen von Hooks ist die Möglichkeit, eigene benutzerdefinierte Hooks zu erstellen. Damit können Sie Komponentenlogik in wiederverwendbare Funktionen extrahieren. Nehmen wir an, Sie möchten die Fensterbreite in mehreren Komponenten verfolgen. Sie können einen eigenen Hook mit dem Namen useWindowWidth erstellen:

<script type="text/babel">
function useWindowWidth() {
    const [width, setWidth] = React.useState(window.innerWidth);

    React.useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    Breite zurückgeben;
}
</script>

        

Jetzt kann jede Komponente, die die Fensterbreite wissen muss, diesen benutzerdefinierten Hook verwenden:

<script type="text/babel">
function MeineKomponente() {
    const width = useWindowWidth();

    return (
        <div>Fensterbreite: {width}</div>
    );
}
ReactDOM.render(<MyComponent />, document.getElementById('root'));
</script>

        

Dieses Muster fördert die Wiederverwendbarkeit von Code und die Trennung von Belangen, was zu einer saubereren und modulareren Codebasis führt.

Erweiterte Patterns: useReducer und useContext

Für komplexe Zustandslogik bietet React den useReducer Hook, der eine Alternative zu useState ist. Er ist besonders nützlich für die Verwaltung von Zuständen, die mehrere Sub-Werte beinhalten oder wenn der nächste Zustand vom vorherigen abhängt.

<script type="text/babel">
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return {count: state.count + 1};
        case 'dekrement':
            return {count: state.count - 1};
        default:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = React.useReducer(reducer, {count: 0});

    return (
        <div>
            Count: {state.count}
            <button onClick={() => dispatch({type: 'decrement'})}>-</button>
            <button onClick={() => dispatch({type: 'increment'})}>+</button>
        </div>
    );
}
ReactDOM.render(<Counter />, document.getElementById('root'));
</script>

        

Wenn man einen globalen Zustand hat, auf den viele Komponenten zugreifen müssen, kann der useContext Hook von React mit dem useReducer Hook gepaart werden, um eine leistungsstarke Lösung für die Zustandsverwaltung zu bieten, die es mit externen Bibliotheken wie Redux aufnehmen kann.

Abschluss

React Hooks eröffnen eine Welt von Möglichkeiten, um einfacheren, intuitiveren und besser wartbaren React-Code zu schreiben. Wenn Sie die grundlegenden und fortgeschrittenen Hooks beherrschen, können Sie Ihren Arbeitsablauf bei der Webentwicklung drastisch verbessern. Egal, ob Sie den Zustand lokaler Komponenten mit useState verwalten, Seiteneffekte mit useEffect handhaben, Ihre eigenen Hooks erstellen oder komplexe globale Zustände mit useReducer und useContext verwalten, Hooks bieten Ihnen die Werkzeuge, die Sie benötigen, um robuste und skalierbare Anwendungen zu erstellen.