[javascript] 소품에서 구성 요소 초기화 상태를 반응

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 = {} (감사합니다)로 변경했지만 여전히 차이가 보이지 않습니다. 하나가 다른 것보다 낫습니까?

답변

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

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

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

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