리액트 컨스트럭터 ES6 대 ES7

리액트 컨스트럭터 ES6 대 ES7

Respect tutorials 페이지에서 ES6가 컨스트럭터 함수를 사용하여 이렇게 상태를 초기화한다는 내용을 읽었습니다.

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

그런 다음 ES7 구문을 사용하여 동일한 작업을 수행합니다.

// Future Version
export class Counter extends React.Component {
  static propTypes = { initialCount: React.PropTypes.number };
  static defaultProps = { initialCount: 0 };
  state = { count: this.props.initialCount };
  tick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

ES7이 ES6 버전이나 ES5 버전보다 나은 이유는 무엇입니까?

감사해요.

ES7은 다음과 같은 시나리오를 지원하므로 더 좋습니다.

• 기대치에 대한 선언적 해석이 유용한 경우.예를 들어 편집자가 이 정보를 사용하여 TypeAheads/Inference에 사용할 수 있도록 하고, TypeScript/Flow는 사용자가 클래스 모양에 대한 의도를 표현할 수 있도록 합니다.
• 일반 사용자가 복잡한 초기화 로직과는 별도로 속성에 대해 사람이 읽을 수 있는 문서에만 이 기능을 사용할 수 있습니다.
• 이러한 힌트 중 일부를 사용하여 클래스에서 생성된 개체를 VM이 선제적으로 최적화할 수 있습니다.

주의: ES7을 사용하여 상태를 정의하면Property initializers특징

참고 자료:JavaScript용 클래스 필드 선언

언급URL : https://stackoverflow.com/questions/35662932/react-constructor-es6-vs-es7