Reaccionar componente inicializar estado desde accesorios

En React, ¿hay alguna diferencia real entre estas dos implementaciones? Algunos amigos me dicen que el primer componente es el patrón, pero no veo por qué. El segundo componente parece más simple porque el renderizado se llama solo una vez.

Primero:

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;

Segundo:

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;

Actualización: cambié setState () a this.state = {} (gracias Joe), sin embargo, todavía no veo la diferencia. ¿Es uno mejor que otro?

Cabe señalar que es un antipatrón para copiar propiedades que nunca cambian al estado (solo acceda a .props directamente en ese caso). Si tiene una variable de estado que eventualmente cambiará pero comienza con un valor de .props, ni siquiera necesita una llamada al constructor; estas variables locales se inicializan después de una llamada al constructor del padre:

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

Esta es una taquigrafía equivalente a la respuesta de @joews a continuación. Parece que solo funciona en versiones más recientes de los transpiladores es6, he tenido problemas con él en algunas configuraciones de paquetes web. Si esto no funciona para usted, puede intentar agregar el complemento babel babel-plugin-transform-class-properties, o puede usar la versión no abreviada de @joews a continuación.

No necesita llamar setStatea un componente constructor; es idiomático configurarlo this.statedirectamente:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Ver React docs - Agregar estado local a una clase .

No hay ninguna ventaja en el primer método que describe. Resultará en una segunda actualización inmediatamente antes de montar el componente por primera vez.

Actualización para React 16.3 alpha introducida static getDerivedStateFromProps(nextProps, prevState)( docs ) como reemplazo de componentWillReceiveProps.

getDerivedStateFromProps se invoca después de que se instancia un componente y cuando recibe nuevos accesorios. Debería devolver un objeto al estado de actualización, o nulo para indicar que los nuevos accesorios no requieren actualizaciones de estado.

Tenga en cuenta que si un componente principal hace que su componente se vuelva a representar, se llamará a este método incluso si los accesorios no han cambiado. Es posible que desee comparar valores nuevos y anteriores si solo desea manejar los cambios.

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

Es estático, por lo tanto, no tiene acceso directo a this(sin embargo, sí tiene acceso prevState, lo que podría almacenar cosas que normalmente están unidas a, thispor ejemplo refs)

editado para reflejar la corrección de @ nerfologist en los comentarios

Puede usar el formulario corto como se muestra a continuación si desea agregar todos los accesorios para indicar y conservar los mismos nombres.

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

establecer los datos de estado dentro del constructor como este

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

no funcionará si configura el método de componente lateralDidMount () a través de accesorios.

Si inicia directamente el estado desde los accesorios, se mostrará una advertencia en React 16.5 (5 de septiembre de 2018)

puede usar el keyvalor para restablecer el estado cuando sea necesario, pasar los accesorios al estado no es una buena práctica, porque tiene un componente no controlado y controlado en un solo lugar. Los datos deben estar en un solo lugar manejado, lea este https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -llave

Puede usar componentWillReceiveProps.

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

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

DEBE TENER CUIDADO cuando inicializa statedesde el propsconstructor. Incluso si se propscambia a uno nuevo, el estado no cambiará porque el montaje nunca volverá a ocurrir. Entonces getDerivedStateFromPropsexiste para eso.

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