Инициализировать компонент инициализации компонента из реквизита

В реакторе существуют ли какие-либо реальные различия между этими двумя реализациями? Некоторые друзья говорят мне, что FirstComponent - это образец, но я не понимаю, почему. SecondComponent кажется более простым, потому что рендер вызывается только один раз.

Во-первых:

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;

Во-вторых:

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;

Обновление: Я изменил setState() на this.state = {} (спасибо joews). Тем не менее, я до сих пор не вижу разницы. Лучше другого?

Ответ 1

Вам не нужно вызывать setState в компоненте constructor - он идиоматический, чтобы установить this.state напрямую:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

См. React docs - Добавление локального состояния в класс.

Нет никакого преимущества для первого описанного вами метода. Это приведет к второму обновлению сразу перед установкой компонента в первый раз.

Ответ 2

Вы можете использовать короткую форму, как показано ниже, если хотите добавить все реквизиты для сохранения и сохранения тех же имен.

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

Ответ 3

Вы можете пропустить вызов конструктора, если все, что вы делаете, это установка переменных.

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
  };
}

по крайней мере в потоке - я не уверен, что это стандартный синтаксис ES6.