React/React Native의 ES5/ES6 비교 표

최근 ES5와 ES6의 맞춤법 대조표를 정리했는데 앞으로 ES5의 코드를 읽고 대조를 통해 ES6에서 같은 기능을 할 수 있도록 유용하게 사용해 주시기 바랍니다.

모듈

인용하다

ES5에서 CommonJS 표준을 사용하는 경우 React 패키지 도입은 기본적으로 Require를 통해 이루어지며 코드는 다음과 같습니다.

//ES5
var React = require("react");
var {
    Component,
    PropTypes
} = React;  //  React    

var ReactNative = require("react-native");
var {
    Image,
    Text,
} = ReactNative;  //     React Native  

ES6에서는 import Write가 더 표준화됨

//ES6
import React, { 
    Component,
    PropTypes,
} from 'react';
import {
    Image,
    Text
} from 'react-native'

단일 클래스 내보내기

ES5에서 하나의 클래스를 다른 모듈에 내보내려면 일반적으로 모듈을 통과해야 한다.내보내기

//ES5
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

ES6에서는 일반적으로 export default를 사용하여 동일한 기능을 수행합니다.

//ES6
export default class MyComponent extends Component{
    ...
}

참조할 때도 비슷합니다.

//ES5
var MyComponent = require('./MyComponent');

//ES6
import MyComponent from './MyComponent';

가져오는 것과 내보내는 쓰기 방법은 반드시 조립되어야 하며 혼용해서는 안 된다.

어셈블리 정의

ES5에서는 통상적으로 React를 통과한다.createClass는 다음과 같이 구성 요소 클래스를 정의합니다.

//ES5
var Photo = React.createClass({
    render: function() {
        return (
            
                
            
        );
    },
});

ES6에서, 우리는 React로부터 계승되는 것을 정의한다.Component의 class는 다음과 같이 구성 요소 클래스를 정의합니다.

//ES6
class Photo extends Component {
    render() {
        return (
           
                
            
        );
    }
}

어셈블리에 메서드 정의하기

위의 예에서 볼 수 있듯이 구성 요소에 대한 정의 방법은 더 이상 이름을 사용하지 않습니다:function () 의 쓰기가 아니라 직접 이름 () 을 사용합니다. 방법의 마지막에 쉼표가 있을 수 없습니다.

//ES5 
var Photo = React.createClass({
    componentWillMount: function(){

    },
    render: function() {
        return (
            
                
            
        );
    },
});

//ES6
class Photo extends Component {
    componentWillMount() {

    }
    render() {
        return (
            
                
            
        );
    }
}

구성 요소의 속성 유형 및 기본 속성 정의

ES5에서 속성 유형과 기본 속성은 각각propTypes 구성원과 getDefaultProps 방법을 통해 실현된다

//ES5 
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            
              
            
        );
    },
});

ES6에서는 static 구성원을 통일적으로 사용하여 실현할 수 있다

//ES6
class Video extends 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,
    };  //        
    render() {
        return (
            
            
        );
    } //               
}

이렇게 쓰는 사람도 있다. 추천하지는 않지만 코드를 읽을 때 그 뜻을 알 수 있어야 한다.

//ES6
class Video extends Component {
    render() {
        return (
            
            
        );
    }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

주의:React 개발자에게 static 구성원은 IE10 및 이전 버전에서 계승될 수 없으며, IE11과 다른 브라우저에서는 가능합니다. 이것은 때때로 문제를 가져올 수 있습니다.React Native 개발자는 이 문제를 걱정하지 않아도 됩니다.

STATE 초기화

ES5는 이와 유사합니다.

//ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6 에서는

//ES6
class Video extends Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

그러나 우리는 더욱 이해하기 쉬운 구조 함수에서 초기화하는 것을 추천한다. (이렇게 하면 필요에 따라 계산을 할 수 있다.)

//ES6
class Video extends Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

방법을 리콜로 제공하다

ES6에 익숙한 많은 사용자들은 오히려 ES5에서 이렇게 할 수 있다는 것을 이해하지 못한다.

//ES5
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            
                {this.props.label}
            
        )
    },
});

ES5에서, React.createClass는 모든 방법을 한 번씩 bind합니다. 이렇게 하면 임의의 곳에 리셋 함수로 제출할 수 있고this는 변하지 않습니다.그러나 정부는 오히려 표준적이지 않고 이해하기 어렵다고 주장하고 있다.ES6에서,bind를 통해this 인용을 연결하거나, 화살표 함수를 사용해야 합니다. (현재 scope의this 인용을 연결합니다.)

//ES6
class PostInfo extends Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            this.handleOptionsButtonClick(e)}
                >
                {this.props.label}
            
        )
    },
}

화살표 함수는 실제적으로 여기에 임시 함수를 정의했다. 화살표 함수의 화살표=> 이전에는 빈 괄호, 한 개의 매개 변수 이름, 또는 괄호로 묶은 여러 개의 매개 변수 이름이 있었고, 화살표 다음에는 표현식 (함수의 반환값으로) 이나 괄호로 묶은 함수체 (리턴을 통해 값을 되돌려야 하며, 그렇지 않으면 undefined로 되돌려야 한다) 가 될 수 있었다.

//        
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

주의해야 할 것은bind든 화살표 함수든 매번 실행될 때마다 새로운 함수 인용으로 되돌아온다는 것이다. 따라서 함수 인용이 다른 일을 하려면 (예를 들어 감청기 마운트 해제) 이 인용을 저장해야 한다.

//      
class PauseMenu extends Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}

//      
class PauseMenu extends Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

//      
class PauseMenu extends Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //         arrow function      ，           this  
    }
}

Mixins

ES5에서는 PureRenderMixin과 같은 클래스에 새로운 방법을 추가하기 위해 Mixin을 자주 사용합니다.

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return 
foo
;
  }
});

그러나 현재 정부는 더 이상 ES6에서 Mixin을 추진할 계획이 없으므로 가능한 한 빨리 Mixin의 작성 방식을 포기해야 한다.

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: 'Hello' });
    }
    render() {
        return ;
    }
};

//HigherOrderComponent.js
import { Enhance } from "./Enhance";

MyComponent extends Component {
    render() {
        if (!this.data) return 
Waiting...
;
        return 
{this.data}
;
    }
}

export default Enhance(MyComponent); // Enhanced component

하나의'증강함수'로 특정한 클래스에 방법을 추가하고 새로운 클래스로 돌아가는 것은 mixin이 실현하는 대부분의 수요를 실현할 수 있다.

ES6+의 기타 이점

해체 & 속성 연장

ES6+의 해체와 속성 연장을 결합하여 우리는 아이에게 속성을 전달하는 것이 더욱 편리하다.이 예에서는 className 이외의 모든 속성을 div 태그에 전달합니다.

class AutoloadingPostsGrid extends Component {
    render() {
        const {
            className,
            ...others,  // contains all properties of this.props except for className
        } = this.props;
        return (
            

                
                Load more
            
        );
    }
}

모든 속성을 전달하면서 새 className 값을 덮어씁니다.

    …

이 예는 반대로 속성에className이 포함되지 않으면 기본값을 제공하고, 속성에 이미 포함되면 속성의 값을 사용합니다

    …

나중에 수집하면 계속 업데이트해서 문법을 배우기 편할 것이다