Réinitialise l’état d’initialisation du composant à partir 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 pattern, mais je ne vois pas pourquoi. Le SecondComponent semble plus simple car le rendu est appelé une seule fois.

Premier:

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 (  ); } } 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 (  ); } } 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 que c’est un anti-pattern de copier des propriétés qui ne changent jamais à l’état (il suffit d’accéder directement à .props 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 fonctionner uniquement sur les versions plus récentes des transstackurs es6, j’ai eu des problèmes avec certaines configurations Webpack. Si cela ne fonctionne pas pour vous, la version non sténographique de @joews le sera.

    Vous n’avez pas besoin d’appeler setState dans le constructor un composant – il est idiomatique de définir directement this.state :

     class FirstComponent extends React.Component { constructor(props) { super(props); this.state = { x: props.initialX }; } // ... } 

    Voir React docs – Ajouter un état local à une classe .

    Il n’y a aucun avantage à la première méthode que vous décrivez. Il en résulte une seconde mise à jour immédiatement avant le assembly du composant pour la première fois.

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

    getDerivedStateFromProps est appelé après l’instanciation d’un composant et lorsqu’il reçoit de nouveaux accessoires. Il doit retourner un object à mettre à jour ou null pour indiquer que les nouveaux accessoires ne nécessitent aucune mise à jour d’état.

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

    Il est statique, donc il n’y a pas d’access direct à this (cependant, il a access à prevState , qui pourrait stocker les choses normalement attachées à this par exemple les refs )

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

    Vous pouvez utiliser la forme abrégée comme ci-dessous si vous souhaitez append tous les accessoires pour indiquer et conserver les mêmes noms.

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