ES6 문법 으로 React 코드 를 재 구성 합 니 다.

ES6 문법 으로 React 구성 요 소 를 재 구성 합 니 다.
Airbnb React/JSX Style Guide에 서 는 ES6 문법 으로 react 구성 요 소 를 만 드 는 것 을 추천 합 니 다.ES6 class 문법 으로 구성 요 소 를 만 드 는 것 과 이전에 React.createClass 방법 으로 구성 요 소 를 만 드 는 것 이 다 릅 니 다.
구성 요소 만 들 기
ES6 class 가 만 든 구성 요소 문법 은 더욱 간단명료 하고 자바 script 에 도 부합 합 니 다.내부 방법 은 function 키 워드 를 사용 할 필요 가 없습니다.
React.createClass

import React from 'react';

const MyComponent = React.createClass({
 render: function() {
  return (
   <div>          </div>
  );
 }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 render() {
  return (
   <div>ES6       </div>
  );
 }
}

export default MyComponent;

props propTypes and getDefaultProps
1.React.Component 를 사용 하여 구성 요 소 를 만 들 려 면 constructor 에서 슈퍼()를 호출 하여 React.Component 에 전달 해 야 합 니 다.또한 react 0.13 이후props는 변 하지 않 아야 합 니 다.
2.ES6 class 문법 으로 구성 요 소 를 만 들 기 때문에 내부 에 서 는 방법 만 정의 할 수 있 고 속성 을 정의 할 수 없습니다.class 의 속성 은 class 이외 로 만 정의 할 수 있 습 니 다.그래서props구성 요소 외부 에 써 야 합 니 다.
3.이전propTypes방법 에 대해 서 는 props 가 변 하지 않 기 때문에 현재 하나의 속성 으로 정의 되 었 습 니 다.getDefaultProps과 마찬가지 로 class 외부 에 정의 해 야 합 니 다.
React.createClass

import React from 'react';

const MyComponent = React.createClass({
 propTypes: {
  nameProp: React.PropTypes.string
 },
 getDefaultProps() {
  return {
   nameProp: ''
  };
 },
 render: function() {
  return (
   <div>          </div>
  );
 }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
  super(props);
 }
 
 render() {
  return (
   <div>ES6       </div>
  );
 }
}

MyComponent.propTypes = {
 nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
 nameProp: ''
};

export default MyComponent;

State
ES6 class 문법 으로 구성 요 소 를 만 듭 니 다.state 를 초기 화 하 는 작업 은 constructor 에서 이 루어 집 니 다.재 호출propTypes방법 이 필요 없습니다.이런 문법 은 자 바스 크 립 트 언어 습관 에 더욱 부합된다.
React.createClass

import React from 'react';

const MyComponent = React.createClass({
 getInitialState: function() {
  return { data: [] };
 },
 
 render: function() {
  return (
   <div>          </div>
  );
 }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
  super(props);
  this.state = { data: [] };
 }
 
 render() {
  return (
   <div>ES6       </div>
  );
 }
}

export default MyComponent;

this
ES6 class 문법 으로 구성 요 소 를 만 듭 니 다.class 의 방법 은 this 를 인 스 턴 스 에 자동 으로 연결 하지 않 습 니 다.getInitialState또는 화살표 함수 .bind(this)를 사용 하여 수 동 으로 연결 해 야 합 니 다.
React.createClass

import React from 'react';

const MyComponent = React.createClass({
 handleClick: function() {
  console.log(this);
 },
 render: function() {
  return (
   <div onClick={this.handleClick}>          </div>
  );
 }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
 handleClick() {
  console.log(this);
 }
 
 render() {
  return (
   <div onClick={this.handleClick.bind(this)}>ES6       </div>
  );
 }
}

export default MyComponent;

constructor 에 바 인 딩 방법 을 쓸 수도 있 습 니 다:

import React,{ Component } from 'react';

class MyComponent extends Component {
 constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  console.log(this);
 }
 
 render() {
  return (
   <div onClick={this.handleClick}>ES6       </div>
  );
 }
}

export default MyComponent;

또는 화살표 함수 사용 ＝>:

import React,{ Component } from 'react';

class MyComponent extends Component {
 handleClick = () => {
  console.log(this);
 }
 
 render() {
  return (
   <div onClick={this.handleClick}>ES6       </div>
  );
 }
}

export default MyComponent;

Mixins
ES6 문법 으로 구성 요 소 를 만 드 는 것 은 React mixins 를 지원 하지 않 습 니 다.React mixins 를 사용 하려 면 React.createClass 방법 으로 구성 요 소 를 만 들 수 밖 에 없습니다.

import React,{ Component } from 'react';

var SetIntervalMixin = {
 doSomething: function() {
  console.log('do somethis...');
 },
};
const Contacts = React.createClass({
 mixins: [SetIntervalMixin],
 
 handleClick() {
  this.doSomething(); //  mixin
 },
 render() {
  return (
   <div onClick={this.handleClick}></div>
  );
 }
});

export default Contacts;

총결산
전체적으로 말 하면 ES6 를 사용 하여 구성 요 소 를 만 드 는 문법 이 더욱 간결 합 니 다.이런 문법 은 너무 많은 React 모델 코드 를 피 할 수 있 고 순수한 javascript 문법 을 더 많이 사용 하여 javascript 문법 습관 에 더욱 부합 합 니 다.React 정 부 는 어떤 문법 을 사용 하 라 고 강제 적 으로 요구 하지 않 고 필요 에 따라 합 리 적 인 선택 을 하면 된다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.