Composant React initialisant l'état à partir de props

Question

Dans React, y a-t-il de réelles différences entre ces deux implémentations ? Certains amis me disent que le FirstComponent est le modèle, mais je ne vois pas pourquoi. Le site SecondComponent semble plus simple car le rendu n'est appelé qu'une seule fois.

D'abord :

import React, { PropTypes } from 'react'

class FirstComponent extends React.Component {

  state = {
    description: ''
  }

  componentDidMount() {
    const { description} = this.props;
    this.setState({ description });
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} /> 
    );
  }
}

export default FirstComponent;

Deuxièmement :

import React, { PropTypes } from 'react'

class SecondComponent extends React.Component {

  state = {
    description: ''
  }

  constructor (props) => {
    const { description } = props;
    this.state = {description};
  }

  render () {
    const {state: { description }} = this;    
    return (
      <input type="text" value={description} />   
    );
  }
}

export default SecondComponent;

Mise à jour : J'ai changé setState() a this.state = {} (merci joews), Cependant, je ne vois toujours pas la différence. L'un est-il meilleur que l'autre ?

Answer 1

Il convient de noter que la copie de propriétés qui ne changent jamais dans l'état est un anti-modèle (il suffit d'accéder directement à .props dans ce cas). Si vous avez une variable d'état qui changera éventuellement mais qui commence avec une valeur provenant de .props, vous n'avez même pas besoin d'appeler le constructeur - ces variables locales sont initialisées après un appel au constructeur du parent :

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

C'est un équivalent abrégé de la réponse de @joews ci-dessous. Il semble que cela ne fonctionne que sur les versions plus récentes des transpilers es6, j'ai eu des problèmes avec cela sur certaines configurations de webpack. Si cela ne fonctionne pas pour vous, vous pouvez essayer d'ajouter le plugin babel. babel-plugin-transform-class-properties ou vous pouvez utiliser la version non abrégée de @joews ci-dessous.

Answer 2

Vous n'avez pas besoin d'appeler setState dans un composant constructor - il est idiomatique de mettre this.state directement :

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

Voir React docs - Ajout d'un état local à une classe .

La première méthode que vous décrivez ne présente aucun avantage. Elle entraînera une deuxième mise à jour immédiatement avant le montage du composant pour la première fois.

Answer 3

Mise à jour pour React 16.3 alpha introduit static getDerivedStateFromProps(nextProps, prevState) ( docs ) en remplacement de componentWillReceiveProps .

getDerivedStateFromProps est invoqué après l'instanciation d'un composant ainsi que lorsqu'il reçoit de nouveaux props. Il doit retourner un objet pour mettre à jour l'état, ou null pour indiquer que les nouveaux props ne nécessitent aucune mise à jour de l'état.

Notez que si un composant parent provoque un nouveau rendu de votre composant, cette méthode sera appelée même si les props n'ont pas changé. Vous pouvez comparer les nouvelles valeurs et les précédentes si vous souhaitez uniquement gérer les modifications.

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Il est statique, il n'a donc pas d'accès direct à l'information. this (cependant, il a accès à prevState qui pourrait stocker des éléments normalement rattachés à this par exemple refs )

édité pour refléter la correction de @nerfologist dans les commentaires

Answer 4

Vous pouvez utiliser le formulaire court comme ci-dessous si vous souhaitez ajouter tous les accessoires à l'état et conserver les mêmes noms.

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

Answer 5

Si vous initez directement l'état à partir des props, il y aura un avertissement dans React 16.5 (5 septembre 2018).