Reakcja składnika inicjuje stan z rekwizytów

Czy w React są jakieś rzeczywiste różnice między tymi dwiema implementacjami? Niektórzy znajomi mówią mi, że FirstComponent jest wzorem, ale nie rozumiem dlaczego. SecondComponent wydaje się prostszy, ponieważ renderowanie jest wywoływane tylko raz.

Pierwszy:

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;

Druga:

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;

Aktualizacja: Zmieniłem setState () na this.state = {} (dzięki joews), Jednak nadal nie widzę różnicy. Czy jedno jest lepsze od drugiego?

Należy zauważyć, że jest to anty-wzorzec do kopiowania właściwości, które nigdy nie zmieniają się w stan (wystarczy w tym przypadku uzyskać dostęp do .props). Jeśli masz zmienną stanu, która ostatecznie się zmieni, ale zaczyna się od wartości z .props, nie potrzebujesz nawet wywołania konstruktora - te zmienne lokalne są inicjowane po wywołaniu konstruktora rodzica:

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

Jest to skrót odpowiadający odpowiedzi z @joews poniżej. Wydaje się, że działa tylko na nowszych wersjach transpilatorów es6, miałem problemy z niektórymi ustawieniami webpacka. Jeśli to nie zadziała, możesz spróbować dodać wtyczkę babel babel-plugin-transform-class-propertieslub możesz użyć wersji nieskróconej przez @joews poniżej.

Nie musisz wywoływać setStatekomponentu constructor- idiomatyczne jest ustawienie this.statebezpośrednio:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Zobacz React docs - Dodawanie stanu lokalnego do klasy .

Pierwsza opisana metoda nie ma przewagi. Spowoduje to drugą aktualizację bezpośrednio przed montażem komponentu po raz pierwszy.

Aktualizacja dla React 16.3 alfa wprowadzona static getDerivedStateFromProps(nextProps, prevState)( dokumenty ) jako zamiennik componentWillReceiveProps.

getDerivedStateFromProps jest wywoływane po utworzeniu instancji składnika, a także po otrzymaniu nowych rekwizytów. Powinien zwrócić obiekt, aby zaktualizować stan, lub zerowy, aby wskazać, że nowe rekwizyty nie wymagają aktualizacji stanu.

Zauważ, że jeśli komponent nadrzędny powoduje ponowne renderowanie komponentu, ta metoda zostanie wywołana, nawet jeśli rekwizyty się nie zmieniły. Możesz porównać nowe i poprzednie wartości, jeśli chcesz obsłużyć zmiany.

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

Jest statyczny, dlatego nie ma bezpośredniego dostępu do this(jednak ma dostęp do prevState, który mógłby przechowywać rzeczy normalnie dołączone thisnprefs )

edytowane w celu odzwierciedlenia korekty @ nerfologist w komentarzach

Możesz użyć krótkiego formularza jak poniżej, jeśli chcesz dodać wszystkie rekwizyty do stanu i zachować te same nazwy.

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

ustaw dane stanu wewnątrz konstruktora w ten sposób

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

nie zadziała, jeśli zostanie ustawiony w bocznej metodzie componentDidMount () za pomocą rekwizytów.

Jeśli bezpośrednio zainicjujesz stan z rekwizytów, wyświetli ostrzeżenie w React 16.5 (5 września 2018 r.)

możesz użyć keywartości, aby zresetować stan w razie potrzeby, przekazać rekwizyty do stanu, który nie jest dobrą praktyką, ponieważ masz niekontrolowany i kontrolowany komponent w jednym miejscu. Dane powinny być obsługiwane w jednym miejscu, przeczytaj to https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -klucz

Możesz użyć componentWillReceiveProps.

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

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

MUSISZ BYĆ OSTROŻNY podczas inicjalizacji statez poziomu propskonstruktora. Nawet jeśli zostanie propszmieniony na nowy, stan nie zostanie zmieniony, ponieważ mount nigdy się nie powtórzy. Tak więc getDerivedStateFromPropsistnieje.

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