web-dev-qa-db-fra.com

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>  
    )
}
reactjsredux
33
Aftab Naveed

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);
34
Yohann

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.

27
Shubham Khatri

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);
6
Shivam

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>
 }

}
4
Gabriel Ferreira

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')
)
0
Chandan Purohit