フロントエンド面接のES 5とES 6の違い

まず、ESは何ですか?全体をECMAScriptと呼び、JavaScript言語の核心であり、jsの構成部分を規定しています.文法、タイプ、語句、キーワード、保留字、オペレータ、オブジェクト.下のまっすぐ行くのは違います.
1.システムライブラリの参照
    ES 5の引用は、requireを使ってReactパッケージを導入し、対象として、真の参照を行う必要があります.

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

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

    ES 6では、import法を使用して直接的にシステムライブラリ参照を実現できます.ライブラリオブジェクトを追加作成する必要はありません.

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

2.単一クラスのエクスポートと参照
    ES 5では、クラスを導出して他のモジュールに使用する場合、通常はmodule.exportによって実現され、参照する場合は依然としてrequire方法によって取得される.

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

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

    ES 6では、export defaultを使用して同様の機能を実現しますが、import方法を使用して導入を実現します.

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

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

    注意:ES 5とES 6の導入導出方法はペアになって現れます.
3.コンポーネントを定義する
    ES 5では、コンポーネントクラスの定義は、React.create Classにより実現される.
    注意:ES 5のReact.createClassの後ろには小さい括弧が必要で、最後にはセミコロンが必要です.

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

    ES 6では、モジュール類にReact.Component類を継承させてもいいです.
    注意:ここで終わると、小さい括弧は現れません.また、セミコロンを追加する必要はありません.

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

4.コンポーネントの定義方法
    上の例からも、コンポーネントの定義方法は名前ではなく、名前で表記します.

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

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

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

    }
    render() {
        return (
            
        );
    }
}

5.Stateを初期化する
    ES 5では、初期化stateはget Initial Stateを使用します.

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

ES 6には2つの書き方の最初のものがあり、直接state関数を構築します.

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

第二に、OCに相当する方法で書き換え、constructorを書き換える方法です.

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

6.ES 6の新しい特性

ES 6のletコマンドは変数、用法はvarと同じですが、letはJavaScriptのためにブロックレベルのスコープを追加しました.ES 5にはブロックレベルのスコープがありません.varは変数アップの概念がありますが、letで使用する変数は必ず声明します.

ES 6における変数の構造的割り当ては、オブジェクトの解と配列の解と、例えば、var[a,b,c]=[0,1,2];

ES 6の関数定義は、キーワードfunctionを使用するのではなく、矢印関数=>を利用して定義される.

ES 6には、Fnction A(x,y=9)｛｝のようなデフォルトの関数パラメータが設定されてもよい.

ES 6にセットとMapセットが追加されました.

ES 6に基本データタイプSymbolが追加されました.

…

 
今はまずこんなに多くまとめて、他の子供も補充できます.みんなで勉強して、進歩します.