ES6 문법 으로 React 구성 요 소 를 재 구성 합 니 다.

1.구성 요소 만 들 기
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
.React.Component구성 요 소 를 만 들 려 면 constructor 에서 호출super()을 통 해 props 를React.Component 에 전달 해 야 합 니 다.또한 react 0.13 이후 props 는 변 하지 않 아야 합 니 다.
.ES6 class 문법 으로 구성 요 소 를 만 들 기 때문에 내부 에 서 는 방법 만 정의 할 수 있 고 속성 을 정의 할 수 없습니다.class 의 속성 은 class 이외 로 만 정의 할 수 있 습 니 다.그래서 propTypes 는 구성 요소 외부 에 써 야 합 니 다.
...이전 getDefaultProps 방법 에 대해 서 는 props 가 변 하지 않 기 때문에 현재 하나의 속성 으로 정의 되 었 습 니 다.propTypes 와 마찬가지 로 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;

상태
.ES6 class 문법 으로 구성 요 소 를 만 듭 니 다.state 를 초기 화 하 는 작업 은 constructor 에서 이 루어 져 야 합 니 다.getInitialState 방법 을 더 이상 호출 할 필요 가 없습니다.이런 문법 은 자 바스 크 립 트 언어 습관 에 더욱 부합된다.
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;

이것
.ES6 class 문법 으로 구성 요 소 를 만 듭 니 다.class 의 방법 은 this 를 인 스 턴 스 에 자동 으로 연결 하지 않 습 니 다. .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;

5.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;

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 댓 글 을 달 아 교류 할 수 있 고 궁금 한 점 이 있 으 면 댓 글 을 달 아 교류 할 수 있 습 니 다.