Il componente React inizializza lo stato dagli oggetti di scena

In React, ci sono differenze reali tra queste due implementazioni? Alcuni amici mi dicono che il FirstComponent è il modello, ma non vedo perché. SecondComponent sembra più semplice perché il rendering viene chiamato solo una volta.

Primo:

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;

Secondo:

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;

Aggiornamento: ho cambiato setState () in this.state = {} (grazie joews), tuttavia non vedo ancora la differenza. Uno è meglio dell'altro?

Va notato che è un anti-pattern per copiare proprietà che non cambiano mai nello stato (basta accedere a .props direttamente in quel caso). Se hai una variabile di stato che alla fine cambierà ma inizia con un valore di .props, non hai nemmeno bisogno di una chiamata del costruttore - queste variabili locali vengono inizializzate dopo una chiamata al costruttore del genitore:

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

Questa è una scorciatoia equivalente alla risposta di @joews di seguito. Sembra funzionare solo su versioni più recenti dei transpiler es6, ho avuto problemi con alcune configurazioni di webpack. Se questo non funziona per te, puoi provare ad aggiungere il plug-in babel babel-plugin-transform-class-propertiesoppure puoi utilizzare la versione non abbreviata di @joews di seguito.

Non è necessario chiamare setStateun componente constructor- è idiomatico impostare this.statedirettamente:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Vedi Documenti di React - Aggiunta di stato locale a una classe .

Non vi è alcun vantaggio nel primo metodo che descrivi. Ciò comporterà un secondo aggiornamento immediatamente prima del montaggio del componente per la prima volta.

Aggiornamento per React 16.3 alpha introdotto static getDerivedStateFromProps(nextProps, prevState)( documenti ) in sostituzione di componentWillReceiveProps.

getDerivedStateFromProps viene richiamato dopo un'istanza di un componente e quando riceve nuovi oggetti di scena. Dovrebbe restituire un oggetto per aggiornare lo stato, oppure null per indicare che i nuovi oggetti di scena non richiedono alcun aggiornamento di stato.

Si noti che se un componente padre provoca il rendering del componente, questo metodo verrà chiamato anche se gli oggetti di scena non sono stati modificati. È possibile che si desideri confrontare i valori nuovi e precedenti se si desidera gestire solo le modifiche.

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

È statico, quindi non ha accesso diretto a this(tuttavia ha accesso a prevState, che potrebbe archiviare cose normalmente collegate ad thises. refs)

modificato per riflettere la correzione di @ nerfologist nei commenti

Puoi usare la forma abbreviata come sotto se vuoi aggiungere tutti gli oggetti di scena per dichiarare e conservare gli stessi nomi.

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

impostare i dati di stato all'interno del costruttore in questo modo

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

non funzionerà se si imposta il metodo side componentDidMount () tramite i puntelli.

Se inizi direttamente lo stato dagli oggetti di scena, mostrerà l'avvertimento in React 16.5 (5 settembre 2018)

potresti usare il keyvalore per resettare lo stato quando necessario, passare gli oggetti di scena per affermare che non è una buona pratica, perché hai un componente incontrollato e controllato in un unico posto. I dati devono essere gestiti in un unico posto, leggere questo https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -chiave

È possibile utilizzare componentWillReceiveProps.

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

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

Devi essere attento quando esegui l'inizializzazione stateda propsnel costruttore. Anche se propscambiato in uno nuovo, lo stato non verrebbe modificato perché il mount non si ripeterà mai più. Quindi getDerivedStateFromPropsesiste per quello.

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} /> 
        );
    }
}