Reagieren Sie den Initialisierungsstatus der Komponente von den Requisiten

Gibt es in React echte Unterschiede zwischen diesen beiden Implementierungen? Einige Freunde sagen mir, dass die FirstComponent das Muster ist, aber ich verstehe nicht warum. Die SecondComponent scheint einfacher zu sein, da das Rendern nur einmal aufgerufen wird.

Zuerst:

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;

Zweite:

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;

Update: Ich habe setState () in this.state = {} geändert (danke joews). Ich sehe jedoch immer noch keinen Unterschied. Ist einer besser als der andere?

Es sollte beachtet werden, dass es ein Anti-Pattern ist, Eigenschaften zu kopieren, die sich nie in den Status ändern (in diesem Fall einfach direkt auf .props zugreifen). Wenn Sie eine Statusvariable haben, die sich irgendwann ändert, aber mit einem Wert von .props beginnt, benötigen Sie nicht einmal einen Konstruktoraufruf. Diese lokalen Variablen werden nach einem Aufruf des Konstruktors des übergeordneten Elements initialisiert:

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

Dies ist eine Kurzform, die der Antwort von @joews unten entspricht. Es scheint nur auf neueren Versionen von es6-Transpilern zu funktionieren. Ich hatte Probleme damit bei einigen Webpack-Setups. Wenn dies bei Ihnen nicht funktioniert, können Sie versuchen, das Babel-Plugin hinzuzufügen babel-plugin-transform-class-properties, oder Sie können die Nicht-Kurzschrift-Version von @joews unten verwenden.

Sie müssen keine setStateKomponenten aufrufen constructor- es ist idiomatisch, this.statedirekt festzulegen :

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

Siehe React docs - Hinzufügen eines lokalen Status zu einer Klasse .

Die erste Methode, die Sie beschreiben, hat keinen Vorteil. Unmittelbar vor dem ersten Mounten der Komponente wird ein zweites Update durchgeführt.

Update für React 16.3 Alpha eingeführt static getDerivedStateFromProps(nextProps, prevState)( docs ) als Ersatz für componentWillReceiveProps.

getDerivedStateFromProps wird aufgerufen, nachdem eine Komponente instanziiert wurde und wenn sie neue Requisiten erhält. Es sollte ein Objekt zurückgeben, um den Status zu aktualisieren, oder null, um anzuzeigen, dass für die neuen Requisiten keine Statusaktualisierungen erforderlich sind.

Beachten Sie, dass diese Methode aufgerufen wird, wenn eine übergeordnete Komponente dazu führt, dass Ihre Komponente erneut gerendert wird, auch wenn sich die Requisiten nicht geändert haben. Möglicherweise möchten Sie neue und vorherige Werte vergleichen, wenn Sie nur Änderungen verarbeiten möchten.

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

Es ist statisch, daher ist es nicht direkten Zugriff hat this(allerdings hat es Zugang zu haben prevState, die Dinge normalerweise angebracht speichern könnte thiszB refs)

bearbeitet, um die Korrektur von @ nerfologist in den Kommentaren wiederzugeben

Sie können die folgende Kurzform verwenden, wenn Sie alle Requisiten hinzufügen möchten, um dieselben Namen anzugeben und beizubehalten.

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

Stellen Sie die Statusdaten im Konstruktor wie folgt ein

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

Es wird nicht funktionieren, wenn Sie die Methode side componentDidMount () über Requisiten festlegen.

Wenn Sie den Status direkt von Requisiten aus starten, wird in React 16.5 (5. September 2018) eine Warnung angezeigt.

Sie können den keyWert verwenden, um den Status bei Bedarf zurückzusetzen, und Requisiten übergeben, um zu bestätigen, dass dies keine gute Vorgehensweise ist, da Sie eine unkontrollierte und kontrollierte Komponente an einem Ort haben. Daten sollten an einem Ort verarbeitet werden. Lesen Sie diese https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a -Schlüssel

Sie können componentWillReceiveProps verwenden.

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

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

Du musst vorsichtig sein , wenn Sie initialisieren statevon propsim Konstruktor. Selbst wenn propsder Status auf einen neuen geändert würde, würde er nicht geändert, da das Mount nie wieder vorkommt. Also getDerivedStateFromPropsexistiert dafür.

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