Реагировать состояние инициализации компонента из реквизита

В React, есть ли реальные различия между этими двумя реализациями? Некоторые друзья говорят мне, что 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), однако я до сих пор не вижу разницы. Один лучше других?

Следует отметить, что копирование свойств, которые никогда не изменяются в состояние, является антипаттерном (в этом случае просто обращайтесь к .props напрямую). Если у вас есть переменная состояния, которая со временем изменится, но будет начинаться со значения из .props, вам даже не нужен вызов конструктора - эти локальные переменные инициализируются после вызова конструктора родителя:

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

Это стенографический эквивалент ответа из @joews ниже. Кажется, он работает только на более поздних версиях транспортеров es6, у меня были проблемы с ним при некоторых настройках веб-пакетов. Если это не работает для вас, вы можете попробовать добавить плагин babel babel-plugin-transform-class-properties, или вы можете использовать не сокращенную версию, используя @joews ниже.

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

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

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

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

Введено обновление для React 16.3 alpha static getDerivedStateFromProps(nextProps, prevState)( документы ) в качестве замены componentWillReceiveProps.

getDerivedStateFromProps вызывается после создания экземпляра компонента, а также при получении новых реквизитов. Он должен возвращать объект для обновления состояния, или нуль, чтобы указать, что новые реквизиты не требуют никаких обновлений состояния.

Обратите внимание, что если родительский компонент вызывает повторную визуализацию вашего компонента, этот метод будет вызываться, даже если реквизиты не изменились. Вы можете сравнить новые и предыдущие значения, если хотите обрабатывать только изменения.

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

Он статичен, поэтому не имеет прямого доступа к нему this(однако у него есть доступ prevState, который может хранить вещи, к которым обычно прикреплены, thisнапример refs)

отредактировано, чтобы отразить исправление @ nerfologist в комментариях

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

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

установить данные о состоянии внутри конструктора, как это

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

это не сработает, если вы установите в методе componentDidMount () стороны через props.

Если вы напрямую инициируете состояние из реквизита, в React 16.5 (5 сентября 2018 г.) будет показано предупреждение.

Вы можете использовать keyзначение для сброса состояния, когда это необходимо, передать реквизиты, чтобы указать, что это не очень хорошая практика, потому что у вас есть неконтролируемый и контролируемый компонент в одном месте. Данные должны обрабатываться в одном месте, прочитайте это https://reactjs.org/blog/2018/06/07/you-probbly-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -key

Вы можете использовать componentWillReceiveProps.

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

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

ВЫ должны быть осторожны, когда вы инициализируете stateиз propsконструктора. Даже если оно будет propsизменено на новое, состояние не изменится, потому что mount никогда не повторится. Так getDerivedStateFromPropsсуществует для этого.

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