Anstatt meine Komponenten in eine Klasse zu schreiben, möchte ich stattdessen die Funktionssyntax verwenden.
Wie überschreiben ich componentDidMount
, componentWillMount
innerhalb Funktionskomponenten?
Ist es überhaupt möglich?
const grid = (props) => {
console.log(props);
let {skuRules} = props;
const componentDidMount = () => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
};
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
Antworten:
Bearbeiten: Mit der Einführung
Hooks
ist es möglich, ein Lebenszyklus-Verhalten sowie den Status in den Funktionskomponenten zu implementieren. Zur ZeituseEffect
Der Hook kann zum Replizieren des Lebenszyklusverhaltens unduseState
zum Speichern des Status in einer Funktionskomponente verwendet werden.Grundlegende Syntax:
Sie können Ihren Anwendungsfall in Hooks wie implementieren
useEffect
kann auch eine Funktion zurückgeben, die ausgeführt wird, wenn die Komponente nicht bereitgestellt wird. Dies kann verwendet werden, um Hörer abzubestellen und das Verhalten voncomponentWillUnmount
:Beispiel: componentWillUnmount
Um
useEffect
von bestimmten Ereignissen abhängig zu machen , können Sie eine Reihe von Werten bereitstellen, um nach Änderungen zu suchen:Beispiel: componentDidUpdate
Haken äquivalent
Wenn Sie dieses Array einschließen, stellen Sie sicher, dass alle Werte aus dem Komponentenbereich enthalten sind, die sich im Laufe der Zeit ändern (Requisiten, Status). Andernfalls verweisen Sie möglicherweise auf Werte aus früheren Renderings.
Es gibt einige Feinheiten bei der Verwendung
useEffect
; Überprüfen Sie die APIHere
.Vor v16.7.0
Die Eigenschaft von Funktionskomponenten besteht darin, dass sie keinen Zugriff auf Reacts-Lebenszyklusfunktionen oder das
this
Schlüsselwort haben. Sie müssen dieReact.Component
Klasse erweitern, wenn Sie die Lebenszyklusfunktion verwenden möchten.Funktionskomponenten sind nützlich, wenn Sie Ihre Komponente nur ohne zusätzliche Logik rendern möchten.
quelle
useEffect(() => { // action here }, [props.counter])
wird beim ersten Rendern ausgelöst, während componentDidUpdate dies nicht tut.passing an empty array as second argument triggers the callback in useEffect only after the initial render
Das klingt nach einer schmutzigen, hackigen Art, Dinge zu bauen: / Hoffentlich wird das Reaktionsteam in zukünftigen Versionen etwas Besseres einfallen lassen.Sie können den React-Pure-Lifecycle verwenden , um Funktionskomponenten Lifecycle-Funktionen hinzuzufügen.
Beispiel:
quelle
Grid
? Ich sehe es nirgendwo in Ihrem Code-Snippet definiert? Wenn Sie auch hier Redux verwenden möchten, könnten Sie dann mit so etwas davonkommenexport default lifecycle(methods)(connect({},{})(ComponentName))
?Lösung 1: Sie können die neue React HOOKS API verwenden. Derzeit in React v16.8.0
Mit Hooks können Sie mehr Funktionen von React ohne Klassen verwenden. Hooks bieten eine direktere API für die bereits bekannten React-Konzepte: Requisiten, Status, Kontext, Refs und Lebenszyklus . Hooks löst alle mit Recompose angesprochenen Probleme.
Eine Anmerkung des Autors von
recompose
(acdlite, 25. Oktober 2018):Lösung Zwei:
Wenn Sie
recompose
eine React- Version verwenden, die keine Hooks unterstützt, verwenden Sie stattdessen (A React Utility Belt für Funktionskomponenten und Komponenten höherer Ordnung.). Sie könnenrecompose
zum Anhängenlifecycle hooks, state, handlers etc
an eine Funktionskomponente verwenden.Hier ist eine Komponente ohne Rendering, die Lebenszyklusmethoden über das Lebenszyklus-HOC (von der Neuzusammenstellung) anfügt.
quelle
Sie können Ihre eigenen Lebenszyklusmethoden erstellen.
Dienstprogrammfunktionen
Verwendung
quelle
Laut Dokumentation:
Siehe React-Dokumentation
quelle
Wenn Sie React LifeCycle verwenden müssen, müssen Sie Class verwenden.
Stichprobe:
quelle
Sie können das Modul create-react-class verwenden. Offizielle Dokumentation
Natürlich müssen Sie es zuerst installieren
Hier ist ein Arbeitsbeispiel
quelle
Wenn Sie React 16.8 verwenden, können Sie React Hooks verwenden. React Hooks sind Funktionen, mit denen Sie sich in Funktionsstatus- und Lebenszyklusfunktionen aus Funktionskomponenten einbinden können
quelle