생성자에서 상태를 정의하는 것이 좋습니까, 아니면 속성 이니셜라이저를 사용하는 것이 좋습니까?

생성자에서 상태를 정의하는 것이 좋습니까, 아니면 속성 이니셜라이저를 사용하는 것이 좋습니까?

이 babel 설명서에 따르면 ES6+를 React와 함께 사용하는 올바른 방법은 다음과 같은 초기 구성 요소를 사용하는 것입니다.

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

그러나 Dan Abramov의 React DnD 모듈과 같은 일부 공식 예에서는 ES6+를 사용하지만 여전히 컨스트럭터 내에서 상태를 정의합니다.

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

Dan Abramov는 React에 크게 공헌하고 있으며, 컨스트럭터 외부에서 상태를 정의할 수 있다는 것을 알고 있지만 컨스트럭터 내에서 상태를 정의할 수 있습니다.

그래서 어떤 방법이 더 좋은지, 왜 좋은지 궁금해요.

개인적인 취향의 문제라고 생각합니다.전치된 출력은 의미론적으로 동일합니다.

• 클래스 속성
• 컨스트럭터

클래스 필드 제안이 생성자 바디 코드에 대한 구문 설탕이기 때문에 동등합니다.

명시적 생성자(임시 로컬 변수 생성 등)가 필요하지 않은 경우,constructor클래스 필드를 위해 생략할 수 있습니다.

명시적 생성자의 문제는super인수(props)을 실수로 생략하는 경우가 많기 때문에 문제가 발생할 수 있습니다.

constructor() {
    super();
    this.state = { foo: this.props.foo } // this.props is undefined
}

명시적 생성자는 가독성에 도움이 될 수 있습니다.일반적인 방법은 다음과 같습니다.constructor, 화살표 속성도 있습니다.클래스 필드는 나열된 순서대로 할당되므로 이 작업은 올바르게 수행되지 않습니다.

state = { foo: { method: this.someMethod } } // this.someMethod is undefined

someMethod = () => ...;

이 경우 명시적 생성자는 보다 읽기 쉬운 코드를 얻을 수 있습니다.

constructor(props) {
    super(props);

    // <-- this is the place where this.someMethod is really assigned

    this.state = { foo: { method: this.someMethod } }
}

someMethod = () => ...;

Dan의 코드에는 미묘한 버그가 있기 때문에 가능하면 이니셜라이저를 사용하는 것을 추천합니다.반응 성분 생성자는 두 가지 인수, 즉 소품과 컨텍스트를 사용합니다.그는 그것을 부모 컨스트럭터에게 전달하지 않고 있으며, 그것을 필요로 하는 다른 개발자가 쉽게 놓칠 수 있다.

이니셜라이저가 컨스트럭터 인수에 의존하는 경우 등 선택의 여지가 없는 경우가 있습니다.따라서 모든 인수는 부모에게 전달해야 합니다.

몇 가지 시도를 해보니 리액트는 내가 생각했던 문제가 없는 것 같다.원하는 것은 무엇이든 부모 컨스트럭터에게 전달하면 됩니다.예:

class MyComponent extends React.Component {
  constructor(props) {
    super({})
  }

  render() {
    // this.props will still be set correctly here
  }
}

부모 컨스트럭터를 호출하지 않아도 되므로 이니셜라이저를 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/37788342/is-it-better-to-define-state-in-constructor-or-using-property-initializers