Стан ініціалізації реакції компонента від реквізиту

Чи реальні відмінності між цими двома реалізаціями в 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 = {} (спасибі Джоуз), проте різниці я все ще не бачу. Чи один кращий за інших?

Слід зазначити, що це анти-шаблон для копіювання властивостей, які ніколи не змінюються до стану (просто в цьому випадку слід отримати доступ до .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 - Додавання локального стану до класу .

Немає переваги першому описаному вами методу. Це призведе до другого оновлення безпосередньо перед монтажем компонента вперше.

Введено оновлення для React 16.3 альфа static getDerivedStateFromProps(nextProps, prevState)( документи ) в якості заміни componentWillReceiveProps.

getDerivedStateFromProps викликається після екземпляра компонента, а також при отриманні нових реквізитів. Він повинен повернути об’єкт для оновлення стану або нульовим, щоб вказати, що нові реквізити не потребують оновлення стану.

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

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

Він статичний, тому до нього не має прямого доступу this(однак він має доступ до нього prevState, який може зберігати речі, зазвичай прикріплені, thisнаприклад refs)

відредаговано, щоб відобразити виправлення @ нервофолога в коментарях

Ви можете скористатися короткою формою, як показано нижче, якщо ви хочете додати всі реквізити до стану та зберегти ті самі імена.

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

встановити дані про стан всередині конструктора таким чином

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

він не буде працювати, якщо ви встановите в бічний компонент компонентDidMount () через реквізит.

Якщо ви безпосередньо входите в стан від реквізиту, воно покаже попередження в React 16.5 (5 вересня 2018 року)

ви можете використовувати keyзначення для скидання стану, коли це потрібно, передайте реквізит, щоб це не є хорошою практикою, оскільки у вас є неконтрольований і контрольований компонент в одному місці. Дані мають бути в одному місці, читайте це https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncont kontroli-component-with- a -кілька

Ви можете використовувати компонентWillReceiveProps.

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

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

Ви повинні бути обережні при ініціалізації stateз propsв конструкторі. Навіть якби було propsзмінено на нове, стан не було б змінено, оскільки кріплення ніколи не повториться. Так 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} /> 
        );
    }
}