Code commun dans le constructeur de composant React et componentWillReceiveProps

Question

Je viens souvent à ce genre de situation lorsque j'utilise des composants React statefull.

J'ai besoin de faire une opération sur les accessoires - soit faire un traitement que je veux maintenant avoir dans render() ou définir l'état en fonction des valeurs dans les accessoires.

Comme je veux le faire lorsque le composant est initialement monté ainsi que lorsque les accessoires sont mis à jour, je me retrouve avec un code passe-partout comme ceci:

constructor(){ 
    super(props) 
    const modifiedProps = doSomethingWithProps(props) 
     ... 
    this.state = {initialState} 
} 

componentWillReceiveProps(nextProps) { 
    const modifiedProps = doSomethingWithProps(nextProps) 
     ... 
    this.setState({newState}) 
} 

doSomethingWithProps(props){ 
     ... 
} 

Y at-il une meilleure façon comment faire ? Pourquoi ne pas passer les accessoires au composant après qu'ils ont été transformés?

Answer 1

Ceci peut être réalisé en deux façons:

1. utiliser un simple conteneur sans état, qui transforme les accessoires et les transmet à ce composant.

   export const Container = (props) => 
       <YourComponent modifiedProp={doSomethingWithProps(props)} /> 
   

2. Utilisez un connected component et faire la transformation à l'intérieur de la méthode mapStateToProps:

   const mapStateToProps = (state, ownProps) => ({ 
       modifiedProp: doSomethingWithProps(ownProps) 
   }); 
   
   export const ConnectedComponent = connect(mapStateToProps)(YourComponent); 
   

La première option est vraiment une version allégée de la seconde.

Vous pouvez également utiliser selectors pour calculer les accessoires dérivés que vous transmettez à votre composant.

Answer 2

Réponses basées sur les commentaires de question, que je trouve très utile -

S'il y a un tas de travail qui doit être fait sur la base props, componentWillMount vous permet d'utiliser this.setState() dans vos fonctions d'aide et de minimiser les travail qui est fait dans le constructor. Cela peut nettoyer un tas de code autrement dupliqué.

constructor(){ 
    super(props) 
    this.state = {initialState} 
} 

componentWillMount() { 
    this.doSomethingWithProps(this.props); 
} 

componentWillReceiveProps(nextProps) { 
    this.doSomethingWithProps(nextProps) 
} 

doSomethingWithProps(props){ 
    ... 
    this.setState({newState}) 
}