Nachdem ich einige Zeit mit React verbracht habe, verstehe ich den Unterschied zwischen den beiden Hauptparadigmen beim Erstellen von Komponenten.
Meine Frage ist, wann ich welche verwenden soll und warum? Was sind die Vorteile / Kompromisse von einem zum anderen?
ES6-Klassen:
import React, { Component } from 'react';
export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}
Funktionell:
const MyComponent = (props) => {
return (
<div></div>
);
}
Ich denke immer dann, wenn es keinen Zustand gibt, der von dieser Komponente manipuliert werden kann, aber ist es das?
Ich vermute, wenn ich Lebenszyklusmethoden verwende, ist es möglicherweise am besten, eine klassenbasierte Komponente zu verwenden.
javascript
reactjs
ecmascript-6
redux
omarjmh
quelle
quelle
const MyComponent = (props) => <div>...</div>
Antworten:
Sie haben die richtige Idee. Gehen Sie mit funktional, wenn Ihre Komponente nicht viel mehr tut, als einige Requisiten aufzunehmen und zu rendern. Sie können sich diese als reine Funktionen vorstellen, da sie bei gleichen Requisiten immer gleich gerendert werden und sich gleich verhalten. Außerdem interessieren sie sich nicht für Lebenszyklusmethoden oder haben ihren eigenen internen Status.
Da sie leicht sind, ist das Schreiben dieser einfachen Komponenten als Funktionskomponenten ziemlich Standard.
Wenn Ihre Komponenten mehr Funktionen benötigen, z. B. den Status beibehalten, verwenden Sie stattdessen Klassen.
Weitere Informationen: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
EDIT : Vieles davon stimmte bis zur Einführung von React Hooks.
componentDidUpdate
kann repliziert werden mituseEffect(fn)
, wofn
ist die Funktion, die beim erneuten Rendern ausgeführt werden soll.componentDidMount
Methoden können repliziert werden mituseEffect(fn, [])
, wobeifn
die Funktion beim erneuten Rendern ausgeführt werden soll und[]
ein Array von Objekten ist, für die die Komponente genau dann erneut rendern wird, wenn mindestens eines den Wert seit dem vorherigen Rendern geändert hat. Da es keine gibt,useEffect()
wird beim ersten Mount einmal ausgeführt.state
kann repliziert werden mituseState()
, dessen Rückgabewert auf eine Referenz des Zustands und eine Funktion, die den Zustand festlegen kann (dhconst [state, setState] = useState(initState)
), zerstört werden kann. Ein Beispiel könnte dies klarer erklären:In Bezug auf die Empfehlung, wann Klasse über Funktionskomponenten verwendet werden soll, empfiehlt Facebook offiziell , wo immer möglich Funktionskomponenten zu verwenden . Abgesehen davon habe ich eine Reihe von Leuten gehört, die darüber diskutierten, aus Leistungsgründen keine funktionalen Komponenten zu verwenden, insbesondere aus diesem Grund
Bitte prüfen Sie, ob Ihre Komponenten tatsächlich mit einer solchen Geschwindigkeit oder Lautstärke gerendert werden, dass dies Anlass zur Sorge gibt.
Wenn dies der Fall ist, können Sie verhindern, dass Funktionen mithilfe von
useCallback
unduseMemo
Hooks neu definiert werden. Beachten Sie jedoch, dass dies die Leistung Ihres Codes (mikroskopisch) beeinträchtigen kann .Aber ehrlich gesagt habe ich noch nie davon gehört, dass die Neudefinition von Funktionen ein Engpass in React-Apps ist. Vorzeitige Optimierungen sind die Wurzel allen Übels - machen Sie sich darüber Sorgen, wenn es ein Problem ist
quelle
useState
Hook verwenden.Facebook officially recommends using functional components wherever possible
?Versuchen Sie immer, zustandslose Funktionen (Funktionskomponenten) zu verwenden, wann immer dies möglich ist. Es gibt Szenarien, in denen Sie eine reguläre React-Klasse verwenden müssen:
shouldComponentUpdate
AKTUALISIEREN
Es gibt jetzt eine React-Klasse namens "React"
PureComponent
, die Sie erweitern können (anstattComponent
) und die eine eigene implementiertshouldComponentUpdate
, die für Sie den Vergleich flacher Requisiten übernimmt. Weiterlesenquelle
Always try to use stateless functions (functional components) whenever possible.
Ich habe gelesen, dass zehn Leute das sagen. Trotzdem gab keiner von ihnen eine Erklärung dafür.In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.
Weitere Informationen: facebook.github.io/react/docs/…UPDATE März 2019
https://overreacted.io/how-are-function-components-different-from-classes/
UPDATE Februar 2019:
Mit der Einführung von React-Hooks scheinen die React-Teams zu wollen, dass wir nach Möglichkeit funktionale Komponenten verwenden (was besser der funktionalen Natur von JavaScript entspricht).
Ihre Motivation:
Eine Funktionskomponente mit Hooks kann fast alles, was eine Klassenkomponente kann, ohne die oben genannten Nachteile.
Ich empfehle sie so schnell wie möglich zu verwenden.
Ursprüngliche Antwort
Funktionskomponenten sind nicht leichter als klassenbasierte Komponenten, "sie funktionieren genau wie Klassen." - https://github.com/facebook/react/issues/5677#issuecomment-241190513
Der obige Link ist etwas veraltet, aber die Dokumentation von React 16.7.0 besagt, dass Funktions- und Klassenkomponenten:
"sind aus Reacts Sicht gleichwertig." - https://reactjs.org/docs/components-and-props.html#stateless-functions
Es gibt im Wesentlichen keinen Unterschied zwischen einer Funktionskomponente und einer Klassenkomponente, die nur die Rendermethode außer der Syntax implementiert.
In Zukunft (unter Angabe des obigen Links) "könnten wir [Reagieren] solche Optimierungen hinzufügen."
Wenn Sie versuchen, die Leistung durch Eliminieren unnötiger Renderings zu steigern, bieten beide Ansätze Unterstützung.
memo
für Funktionskomponenten undPureComponent
für Klassen.- https://reactjs.org/docs/react-api.html#reactmemo
- https://reactjs.org/docs/react-api.html#reactpurecomponent
Es liegt wirklich an dir. Wenn Sie weniger Boilerplate möchten, gehen Sie funktionsfähig. Wenn Sie funktionale Programmierung lieben und keinen Unterricht mögen, gehen Sie funktional. Wenn Sie Konsistenz zwischen allen Komponenten in Ihrer Codebasis wünschen, wählen Sie Klassen. Wenn Sie es leid sind, von funktionalen zu klassenbasierten Komponenten umzugestalten, wenn Sie so etwas benötigen
state
, entscheiden Sie sich für Klassen.quelle
Ab React 16.8 ist der Begriff Stateless Functional Components irreführend und sollte vermieden werden, da sie nicht mehr zustandslos sind ( React.SFC veraltet , Dan Abramov bei React.SFC veraltet ). Sie können einen Status haben, sie können Hooks haben (die als Lebenszyklusmethoden) überlappen sie sich mehr oder weniger mit Klassenkomponenten
Klassenbasierte Komponenten
Funktionskomponenten:
Warum ich Funktionskomponenten bevorzuge
componentDidMount
,componentDidUpdate
und darstelltcomponentWillUnmount
Lifecycle - MethodenReagieren Sie auf die Motivation, warum Sie Haken verwenden (dh Funktionskomponenten).
quelle