Verwendung von Pfeilfunktionen in Reaktionskomponenten

1. Pfeilfunktionen in React-Klassenkomponenten
2. Pfeilfunktionen in React-Funktionskomponenten
3. Syntax der Pfeilfunktion in React
4. Vorteile der Verwendung der Pfeilfunktion in React

Pfeilfunktionen sind eine neue Ergänzung zu JavaScript, aber sie haben bereits die Art und Weise verändert, wie Millionen von Entwicklern JavaScript-Code schreiben.

Wie Sie vielleicht wissen, bestehen React-Webanwendungen aus mehreren Komponenten. Oft werden Komponenten wiederverwendet; Beispielsweise kann ein E-Commerce-Shop mehrere Instanzen einer untergeordneten Komponente <Produkt> haben.

Pfeilfunktionen in React-Klassenkomponenten

Mit React können Sie Komponenten mithilfe von Klassensyntax definieren. Wenn Sie das Schlüsselwort this in React verwenden möchten, müssen Sie es im Konstruktor binden; Andernfalls geben normale Funktionen, die auf das Schlüsselwort this verweisen, undefiniert zurück.

Code:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e) {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Log to the console</button>;
  }
}

Wenn Sie in regulären Funktionen auf das Schlüsselwort this verweisen müssen, müssen Sie es an den Konstruktor binden. Wenn Sie dies nicht tun, protokolliert die Funktion handleClick() die Komponente App nicht an der Konsole, sondern ist undefiniert.

Pfeilfunktionen in Klassenkomponenten funktionieren anders. Die Verwendung des Schlüsselworts this ist viel einfacher.

Das Schlüsselwort bezieht sich auf die Umgebung, in der die Pfeilfunktion vorhanden ist, die Komponente <App> selbst. Beispielsweise kann eine kleine Umschreibung der obigen Komponente ihr Verhalten erheblich ändern:

Code:

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <button onClick={(e) => console.log(this)}>Log to the console</button>
    );
  }
}

Wenn Sie die Live-Demo auf CodeSandbox öffnen und auf die Schaltfläche klicken, sehen Sie, dass die Konsole die Klassenkomponente anzeigt.

Pfeilfunktionen in React-Funktionskomponenten

Funktionale Komponenten haben das Schlüsselwort this nicht, daher ist der Unterschied zwischen dem Pfeil und der normalen Syntax viel geringer. In funktionalen Komponenten sind Pfeilfunktionen eine sauberere, prägnantere Möglichkeit, Event-Handler in React zu schreiben.

Diese Funktion wird häufig in funktionalen Komponenten verwendet, um Inline-Event-Handler in JavaScript zu schreiben. Schauen wir uns ein Beispiel an:

export default function App() {
  return (
    <div className="App">
      <button onClick={() => alert("hello!")}>Create an alert</button>
    </div>
  );
}

Sie können Pfeilfunktionen auch in einer Variablen speichern und diese Ereignisbehandler als props weitergeben.

export default function App() {
  const handler = () => console.log("An example string");
  return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

Es ist auch möglich, die funktionale Komponente als Pfeilfunktion zu schreiben.

const App = () => {
    return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

Syntax der Pfeilfunktion in React

React ist eine JavaScript-basierte Bibliothek. Sie können also Pfeilfunktionen außerhalb von JSX verwenden.

Die Syntax für die Verwendung von Pfeilfunktionen in React-Komponenten ist ziemlich einfach. Schauen wir uns ein einfaches Beispiel für Pfeilfunktionen an, die keine Argumente annehmen und einen Ausdruck zurückgeben:

const arrowFunction = () => 2+2

In diesem Fall haben wir in der Variablen arrowFunction eine Referenz auf unsere Funktionsdefinition hinterlegt.

Die Funktion nimmt keine Parameter entgegen, also verwenden wir leere Klammern (), gefolgt von einem Pfeil => zwischen Funktionsargumenten und ihrem Körper. Wenn der Funktionskörper nur ein Ausdruck in einer Zeile ist, müssen Sie keine geschweiften Klammern verwenden, um den Funktionskörper zu trennen.

Außerdem müssen Sie die return-Anweisung nicht explizit schreiben; Es ist impliziert. Die obige Funktion gibt das Ergebnis des Ausdrucks 2+2 zurück.

Beim Übergeben eines Parameters

Die Syntax von Pfeilfunktionen folgt dem oben beschriebenen Muster, mit geringfügigen Unterschieden. Schauen wir uns ein Beispiel an:

const arrowFunction = argument => argument+2

Wenn Sie nur einen Parameter übergeben, können Sie ihn in Klammern setzen oder die Verwendung überspringen. In jedem Fall funktioniert die Pfeilfunktion.

Beim Übergeben von zwei oder mehr Parametern

Wenn Sie mehrere Parameter übergeben, müssen Sie sie mit einer Klammer umschließen.

const arrowFunction = (argumentOne, argumentTwo) => argumentOne+argumentTwo

Sie könnten ein Array mit vielen Elementen haben und sie alle auf einmal mit dem Spread-Operator übergeben:

const args = [5,10]
const arrowFunction = (...args) => argumentOne+argumentTwo

Bei Verwendung mehrerer Anweisungen

Schauen wir uns nun Pfeilfunktionen an, die etwas komplexer sind. Der Hauptteil der meisten Funktionen, die Sie in React schreiben, enthält mehrere Anweisungen in mehreren Zeilen.

Wenn Sie Pfeilfunktionen mit mehreren Anweisungen schreiben, müssen Sie den Funktionskörper in geschweifte Klammern einschließen:

const arrowFunction = (argumentOne, argumentTwo) => {
    console.log("doing calculation")
    return argumentOne+argumentTwo
    }

In diesem Fall müssen Sie auch explizit die return-Anweisung schreiben.

Vorteile der Verwendung der Pfeilfunktion in React

Pfeilfunktionen haben in React viele Vorteile. Das vielleicht Größte ist, dass sie eine einfachere Syntax zum Erstellen funktionaler Komponenten in React bieten; Sie können Pfeilfunktionen verwenden, um eine einfache Komponente innerhalb von Minuten zu definieren.

Pfeilfunktionen sind auch einfach als Callbacks in Klassenkomponenten zu verwenden. Sie verhindern häufig Fehler, die mit dem Schlüsselwort this verbunden sind, da Pfeilfunktionen den Wert von this in ihrem Funktionskörper nicht ändern; es bezieht sich immer auf eine Instanz der Klasse.

Ansonsten bieten Pfeilfunktionen Zeiteinsparungen beim Schreiben vieler einfacher Inline-Event-Handler und Callback-Funktionen.