Estado de inicialização do componente React a partir de adereços

No React, existem diferenças reais entre essas duas implementações? Alguns amigos me dizem que o FirstComponent é o padrão, mas não vejo o porquê. O SecondComponent parece mais simples porque a renderização é chamada apenas uma vez.

Primeiro:

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;

Atualização: Alterei setState () para this.state = {} (obrigado joews). No entanto, ainda não vejo a diferença. Um é melhor que outro?

Note-se que é um anti-padrão copiar propriedades que nunca mudam para o estado (basta acessar .props diretamente nesse caso). Se você tiver uma variável de estado que mudará eventualmente, mas começa com um valor de .props, você nem precisa de uma chamada de construtor - essas variáveis ​​locais são inicializadas após uma chamada ao construtor do pai:

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 é uma abreviação equivalente à resposta de @joews abaixo. Parece funcionar apenas em versões mais recentes dos transpilers es6, tive problemas com ele em algumas configurações do webpack. Se isso não funcionar, tente adicionar o plug-in babel babel-plugin-transform-class-propertiesou use a versão não abreviada de @joews abaixo.

Você não precisa chamar setStateum componente constructor- é idiomático definir this.statediretamente:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Consulte React docs - Adicionando estado local a uma classe .

Não há vantagem para o primeiro método que você descreve. Isso resultará em uma segunda atualização imediatamente antes da montagem do componente pela primeira vez.

Atualização para o React 16.3 alpha introduzida static getDerivedStateFromProps(nextProps, prevState)( docs ) como um substituto para componentWillReceiveProps.

getDerivedStateFromProps é chamado depois que um componente é instanciado e quando recebe novos adereços. Ele deve retornar um objeto para atualizar o estado ou nulo para indicar que os novos adereços não exigem nenhuma atualização de estado.

Observe que, se um componente pai fizer com que seu componente seja renderizado novamente, esse método será chamado mesmo que os acessórios não tenham sido alterados. Você pode comparar valores novos e anteriores se quiser lidar apenas com as alterações.

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

É estático, portanto, não tem acesso direto a this(no entanto, tem acesso a prevState, o que poderia armazenar coisas normalmente associadas a, thispor exemplo refs)

editado para refletir a correção de @ nerfologist nos comentários

Você pode usar o formulário curto como abaixo se quiser adicionar todos os adereços ao estado e manter os mesmos nomes.

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

defina os dados do estado dentro do construtor como este

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

ele não funcionará se você definir o método side componentDidMount () por meio de adereços.

Se você iniciar diretamente o estado a partir de adereços, ele mostrará um aviso no React 16.5 (5 de setembro de 2018)

você pode usar o keyvalor para redefinir o estado quando necessário, passar adereços para declarar que não é uma boa prática, porque você tem um componente descontrolado e controlado em um só lugar. Os dados devem estar em um único local, leia este https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -chave

Você pode usar componentWillReceiveProps.

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

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

É necessário ter cuidado ao inicializar a statepartir propsdo construtor. Mesmo se propsalterado para um novo, o estado não seria alterado porque a montagem nunca acontecerá novamente. Então getDerivedStateFromPropsexiste para isso.

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