Méthode de cycle de vie ReactJS dans un composant fonctionnel
Au lieu d'écrire mes composants dans une classe, étant donné qu'ils sont idiots, je les écris surtout dans une fonction.
Mais comment remplacer componentDidMount
, componentWillMount
dans les composants fonctionnels? Est-ce même possible?
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>
)
}
Vous pouvez utiliser react-pure-cycle de vie pour ajouter des fonctions de cycle de vie aux composants fonctionnels.
Exemple:
import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';
const methods = {
componentDidMount(props) {
console.log('I mounted! Here are my props: ', props);
}
};
const Channels = props => (
<h1>Hello</h1>
)
export default lifecycle(methods)(Channels);
Edit: Avec l'introduction de Hooks
, il est possible d'implémenter un comportement de type cycle de vie ainsi qu'un état dans un composant fonctionnel. Actuellement
Les crochets sont une nouvelle proposition de fonctionnalité qui vous permet d’utiliser état et d’autres Réagissez les fonctionnalités sans écrire de cours. Ils sont publiés dans React dans le cadre de v16.8.0
useEffect
hook peut être utilisé pour répliquer le comportement du cycle de vie, et useState
peut être utilisé pour stocker un état dans un composant fonctionnel.
Vous pouvez implémenter votre cas d'utilisation dans des points tels que
const grid = (props) => {
console.log(props);
let {skuRules} = props;
useEffect(() => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
}, []); // passing an empty array as second argument triggers the callback in useEffect only after the initial render thus replicating `componentDidMount` lifecycle behaviour
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>
)
}
useEffect
peut également renvoyer une fonction qui sera exécutée lorsque le composant sera démonté. Ceci peut être utilisé pour se désabonner des auditeurs. Un peut être utilisé pour répliquer le comportement componentWillUnmount
Eg: composantWillUnmount
useEffect(() => {
window.addEventListener('unhandledRejection', handler);
return () => {
window.removeEventListener('unhandledRejection', handler);
}
}, [])
En tant que deuxième argument si vous fournissez des valeurs, celles-ci seront comparées avant de déclencher le rappel s'il s'agit d'une modification de l'un des éléments suivants
Eg: composantDidUpdate
componentDidUpdate(prevProps, prevState) {
const { counter } = this.props;
if (this.props.counter !== nextProps.counter) {
// some action here
}
}
Équivalent Crochets
useEffect(() => {
// action here
}, [props.counter]);
Avant la v16.7.0
La propriété des composants fonctionnels est qu’ils n’ont pas accès aux fonctions du cycle de vie de Reacts ni au mot clé this
. Vous devez étendre la classe React.Component
si vous souhaitez utiliser la fonction de cycle de vie.
class Grid extends React.Component {
constructor(props) {
super(props)
}
componentDidMount () {
if(!this.props.fetched) {
this.props.fetchRules();
}
console.log('mount it!');
}
render() {
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>
)
}
}
Les composants fonctionnels sont utiles lorsque vous souhaitez uniquement restituer votre composant sans nécessiter de logique supplémentaire.
Solution 1: Vous pouvez utiliser le nouveau réagir HOOKS API. Actuellement dans React v16.8.0
Les crochets vous permettent d’utiliser davantage de fonctionnalités de React sans classes. Les crochets fournissent une API plus directe aux concepts de React que vous connaissez déjà: props, state, context, refs et lifecycle . Les crochets résolvent tous les problèmes traités avec Recompose.
Une note de l'auteur de recompose
(acdlite, 25 octobre 2018):
Salut! J'ai créé Recompose il y a environ trois ans. Environ un an après ça, j'ai rejoint l'équipe de React. Aujourd'hui, nous avons annoncé une proposition pour Crochets Hooks résout tous les problèmes que j'ai tenté de résoudre avec Recomposer il y a trois ans, et plus encore. Je serai interrompre la maintenance active de ce paquetage (à l'exception peut-être de correctifs ou correctifs pour la compatibilité avec les futures versions de React), et recommandant que les gens utilisent plutôt des crochets. Votre code existant avec La recomposition fonctionnera toujours, mais ne vous attendez pas à de nouvelles fonctionnalités.
Solution deux:
Si vous utilisez une version de réaction qui ne prend pas en charge les crochets, ne vous inquiétez pas, utilisez plutôt recompose
(ceinture de sécurité A React pour les composants de fonction et les composants d'ordre supérieur.). Vous pouvez utiliser recompose
pour associer lifecycle hooks, state, handlers etc
à un composant fonctionnel.
Voici un composant sans rendu qui attache les méthodes lifecycle via le cycle de vie HOC (à partir de la recomposition).
// taken from https://Gist.github.com/tsnieman/056af4bb9e87748c514d#file-auth-js-L33
function RenderlessComponent() {
return null;
}
export default lifecycle({
componentDidMount() {
const { checkIfAuthed } = this.props;
// Do they have an active session? ("Remember me")
checkIfAuthed();
},
componentWillReceiveProps(nextProps) {
const {
loadUser,
} = this.props;
// Various 'indicators'..
const becameAuthed = (!(this.props.auth) && nextProps.auth);
const isCurrentUser = (this.props.currentUser !== null);
if (becameAuthed) {
loadUser(nextProps.auth.uid);
}
const shouldSetCurrentUser = (!isCurrentUser && nextProps.auth);
if (shouldSetCurrentUser) {
const currentUser = nextProps.users[nextProps.auth.uid];
if (currentUser) {
this.props.setCurrentUser({
'id': nextProps.auth.uid,
...currentUser,
});
}
}
}
})(RenderlessComponent);
Si vous avez besoin d’utiliser React LifeCycle, vous devez utiliser Class.
Échantillon:
import React, { Component } from 'react';
class Grid extends Component {
constructor(props){
super(props)
}
componentDidMount () { /* do something */ }
render () {
return <h1>Hello</h1>
}
}
Vous pouvez utiliser le module create-react-class . Documentation officielle
Bien sûr, vous devez d'abord l'installer
npm install create-react-class
Voici un exemple de travail
import React from "react";
import ReactDOM from "react-dom"
let createReactClass = require('create-react-class')
let Clock = createReactClass({
getInitialState:function(){
return {date:new Date()}
},
render:function(){
return (
<h1>{this.state.date.toLocaleTimeString()}</h1>
)
},
componentDidMount:function(){
this.timerId = setInterval(()=>this.setState({date:new Date()}),1000)
},
componentWillUnmount:function(){
clearInterval(this.timerId)
}
})
ReactDOM.render(
<Clock/>,
document.getElementById('root')
)