Composant React initialiser l'état des accessoires

Dans React, existe-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 SecondComponent semble plus simple car le rendu n'est appelé qu'une seule fois.

Première:

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;

Seconde:

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 () en this.state = {} (merci joews), Cependant, je ne vois toujours pas la différence. Est-ce que l'un est meilleur que l'autre?

Il convient de noter qu'il s'agit d'un anti-modèle pour copier des propriétés qui ne changent jamais en état (accédez simplement à .props directement dans ce cas). Si vous avez une variable d'état qui changera éventuellement mais commence par une valeur de .props, vous n'avez même pas besoin d'un appel de 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),
  };
}

Ceci est un raccourci équivalent à la réponse de @joews ci-dessous. Il semble ne fonctionner que sur les versions plus récentes des transpilateurs 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.

Vous n'avez pas besoin d'appeler setStateun composant constructor- il est idiomatique de définir this.statedirectement:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

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

Il n'y a aucun avantage à la première méthode que vous décrivez. Il en résultera une deuxième mise à jour immédiatement avant de monter le composant pour la première fois.

Mise à jour de React 16.3 alpha introduite 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 accessoires. Il doit retourner un objet pour mettre à jour l'état, ou null pour indiquer que les nouveaux accessoires ne nécessitent aucune mise à jour d'état.

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

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

Il est statique, donc il n'a pas d'accès direct à this(cependant il a accès à prevState, qui pourrait stocker des choses normalement attachées par thisexemple refs)

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

Vous pouvez utiliser le formulaire court comme ci-dessous si vous souhaitez ajouter tous les accessoires pour indiquer et conserver les mêmes noms.

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

définir les données d'état à l'intérieur du constructeur comme ceci

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
  }

cela ne fonctionnera pas si vous définissez la méthode side componentDidMount () via les accessoires.

Si vous lancez directement l'état à partir des accessoires, il affichera un avertissement dans React 16.5 (5 septembre 2018)

vous pouvez utiliser la keyvaleur pour réinitialiser l'état en cas de besoin, passer des accessoires pour indiquer que ce n'est pas une bonne pratique, car vous avez un composant non contrôlé et contrôlé en un seul endroit. Les données doivent être gérées en un seul endroit lire ce https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -clé

Vous pouvez utiliser componentWillReceiveProps.

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
  }

    componentWillReceiveProps(nextProps){
        this.setState({ productdatail: nextProps.productdetailProps })
    }

VOUS DEVEZ ÊTRE PRUDENT lorsque vous initialisez à statepartir propsdu constructeur. Même s'il était propschangé pour un nouveau, l'état ne serait pas changé car le montage ne se reproduirait plus. getDerivedStateFromPropsExiste donc pour cela.

class FirstComponent extends React.Component {
    state = {
        description: ""
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }

        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}