Mit React Hooks den Status einfacher verwalten

In meiner täglichen Arbeit bei FloQast stoße ich bei der React-Entwicklung oft auf eine besondere Situation. Um CSS-Effekte für bestimmte Komponenten umzuschalten, werde ich oft:

• Konvertiert die Funktionskomponente in eine Klassenkomponente und fügt den lokalen Status hinzu
• Erstellen Sie eine Komponente höherer Ordnung, wenn mehrere Komponenten eine gemeinsame Logik haben
• Fädeln Sie Requisiten durch mehrere Komponenten bis zu ihren Endverbrauchern
• Machen Sie Updates und schreiben Sie Tests

Das ist eine Menge. Ich habe mich oft gefragt, ob es einen besseren Weg gibt, das zu tun — und jetzt gibt es einen! Da das React-Team Version 16.8 veröffentlicht hat, können wir diese Probleme mit React Hooks auf sehr elegante Weise angehen.

Was sind React Hooks?

Laut Offizielle Seite von React, Hooks sind eine neue Ergänzung in React 16.8. Mit ihnen können Sie State- und andere React-Funktionen verwenden ohne eine Klasse zu schreiben.Basierend auf der Definition könnte deine erste Reaktion sein: „Werde ich nicht einfach alle meine Klassenkomponenten neu schreiben?!“ React Hooks sind weit mehr als ein Refaktor derselben React-APIs.

Lokalen Staat zur Funktionskomponente hinzufügen

Schauen wir uns eine Schaltflächenkomponente an, wenn ein Benutzer darauf klickt, um ihre Hintergrundfarbe zu ändern:

import React, { useState } from ‘react’;
const MyButton = () => {
   const [background, setBackground] = useState('blue');
   const btnStyle = {
      background: background
   };
   const changeBackground = () => {
     setBackground({
       background: 'green'
     });
    };
  return <Button onclick={changeBackground} style={btnStyle}>
              My Button
       </Button>;
}

‍
Die obige Komponente hat eine einfache Zustandsvariable Hintergrund um aufzuzeichnen, was die aktuelle Hintergrundfarbe der Schaltfläche ist. Gibt es eine Möglichkeit, dies mit einer Funktionskomponente zu tun? Ja, mit Hilfe der React Hooks Bundesstaat verwenden api. Mal sehen, wie wir es in Hooks implementieren:

import React, { useState } from ‘react’;
const MyButton = () => {
   const [background, setBackground] = useState('blue');
   const btnStyle = {
      background: background
   };
   const changeBackground = () => {
     setBackground({
       background: 'green'
     });
    };
  return <Button onclick={changeBackground} style={btnStyle}>My Button</Button>;
}

Wie Sie sehen können, ermöglicht die React Hooks API den lokalen Status in funktionalen Komponenten, reduziert den klassenbezogenen Boilerplate-Code und macht wiederum die funktionale Komponente leistungsfähiger.

Extrahieren Sie Common State Logic

Wenn Sie Hooks in zustandslosen Funktionskomponenten verwenden, können Sie auch Boilerplate loswerden. Überlegen Sie, wie oft Sie Klassenkonstruktorinitialisierungs- und Bindungsfunktionen für Ihre Methoden geschrieben haben. Sehen wir uns den Unterschied mit Hooks an:

import React from 'react';
class GetTime extends React.Component {
 constructor(props) {
     super(props);
     this.state = {
        time: null
     };
  }
  checkTime() {
      this.setState({
         time: new Date()
      });
  }
  componentDidMount() {
     this.interval = setInterval(this.checkTime(), 1000);
  }
  componentWillUnMount() {
      clearInterval(this.interval);
  }
   render() {
     return <div>Current Time is: {this.state.time}</div>
  }
}

Schauen wir uns nun danach an, indem wir Haken:

import React, { useState, useEffect } from ‘react’;
const useTime = () => {
    const [time, setTime] = useState(null);
    useEffect(() => {
        const interval = setInterval(() => {
            setTime(new Date());
        }, 1000);
        return () => clearInterval(interval);
    }, [time]);
    return time;
}

const GetTime = () => {
    const time = useTime();
    return <div>Current Time is: {time}</div>;
}

Aus dem Vergleich können wir sehen, dass es eine Zeit nutzen Funktion, die das umschließt aktuelle Uhrzeit abrufen Logik und setzt die Zeit auf eine lokale Zustandsvariable. Jetzt irgendein Eine funktionale Komponente kann damit die aktuelle Uhrzeit anzeigen. Der Vorteil von Haken Hier vereinfachen wir den Code, indem wir die allgemeine Zustandslogik extrahieren.

Keine Wrapper Hell mehr

Schauen wir uns eine andere Komponente an:

import React from 'react';
import ReactDOM from 'react-dom';

const withCounter = Component => {
  return class ComponentWithCounter extends React.Component {
    state = {
      count: 0,
    };

    handleDecrement = () => {
      this.setState({ count: this.state.count - 1 });
    };

    handleIncrement = () => {
      this.setState({ count: this.state.count + 1 });
    };

    render() {
      const { count } = this.state;

      return (
        <Component {...this.props} count={count} onIncrease={this.handleIncrement} onDecrease={this.handleDecrement} />
      );
    }
  };
};

const App = ({ count, onIncrease, onDecrease }) => {
  return (
    <div>
      <div>Current count: {count}</div>
      <div>
        <button onClick={onDecrease}>-</button>
        <button onClick={onIncrease}>+</button>
      </div>
    </div>
  );
};

const AppWithCounter = withCounter(App);

ReactDOM.render(<AppWithCounter />, document.getElementById('root'));

‍Siehst du vertraut aus? Ja, das habe ich auch oft gesehen. Wie wäre es, wenn wir die obige Komponente in etwas wie das Folgende umwandeln:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const useCounter = () => {
  const [count, setCount] = useState(0);

  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);

  return [ count, onIncrease, onDecrease ];
};

const App = () => {
  const [ count, onIncrease, onDecrease ] = useCounter();

  return (
    <div>
      <div>Current count: {count}</div>
      <div>
        <button onClick={onDecrease}>-</button>
        <button onClick={onIncrease}>+</button>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Kein Wrapper oder Klasse mit einer schönen und sauberen funktionalen Komponentenimplementierung.

Erste Schritte mit React Hooks

Haken sind für uns in mehrfacher Hinsicht von Vorteil. Sie:

1. Lokalen Status und Lebenszyklus in Funktionskomponenten aktivieren
2. Ermöglicht es Ihnen, gemeinsam genutzte Logik in benutzerdefinierte Hooks zu extrahieren
3. Vereinfachen Sie den Code erheblich und helfen Sie Ihnen, aus der Wrapper-Hölle herauszukommen

Der Einstieg ist nicht schmerzhaft! Siehst du? Eintreten für Haken bedeutet nicht, dass Sie jede Klassenkomponente in Ihrer Codebasis umgestalten müssen. Benutze sie, wo es Sinn macht und schon bald wirst du... süchtig sein. Wenn du nicht überzeugt genug bist, Hooks offizielle Dokumente hat einige vernünftige Argumente, die es zu berücksichtigen gilt, und ich hoffe, meine Erfahrung ist hilfreich.