プロップからの反応コンポーネント初期化状態

Reactでは、これら2つの実装の間に実際の違いはありますか？一部の友人は、FirstComponentがパターンだと言っていますが、その理由はわかりません。レンダリングが1回だけ呼び出されるため、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 = {}に変更しました（ジョーズ、ありがとう）。しかし、まだ違いはわかりません。他の1つより優れていますか？

状態に変化しないプロパティをコピーすることはアンチパターンであることに注意してください（その場合は、.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トランスパイラーの最近のバージョンでのみ機能するようですが、一部のWebpackセットアップで問題が発生しました。これでうまくいかない場合は、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-Local State to a Classを参照してください。

あなたが説明する最初の方法に利点はありません。これにより、コンポーネントを初めてマウントする直前に2回目の更新が行われます。

の代わりとして導入されたReact 16.3 alphaの更新static getDerivedStateFromProps(nextProps, prevState)（ドキュメント）componentWillReceiveProps。

getDerivedStateFromPropsは、コンポーネントがインスタンス化された後、および新しいプロパティを受け取ったときに呼び出されます。状態を更新するオブジェクトを返すか、新しいプロップが状態の更新を必要としないことを示すnullを返します。

親コンポーネントによってコンポーネントが再レンダリングされる場合、小道具が変更されていなくても、このメソッドが呼び出されることに注意してください。変更のみを処理する場合は、新しい値と以前の値を比較することができます。

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（）メソッドでuを設定した場合、機能しません。

プロップから直接状態を初期化すると、React 16.5（2018年9月5日）で警告が表示されます

key値を使用して、必要に応じて状態をリセットしたり、小道具を渡して状態を制御したりすることはお勧めしません。データは1か所で処理する必要があります。このhttps://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrol-component-with-aをお読み ください。 -キー

あなたはcomponentWillReceivePropsを使用することができます。

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

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

コンストラクタでstatefrom を初期化するときは注意が必要です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} /> 
        );
    }
}