ES 6文法入門

ReactやReact Nativeで勉強して使っていますが、まず一つの特徴はよく分かりません.ES 2015(ES 6)の文法を使っているからです.そこで、インターネットで知っておくべきES 6の知識点を整理しました.ほとんどは引用です.後期に自分の心得があれば、この文章を更新します.
ES 6
ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.
文法の説明
ES 6の説明を中心に、後ろにES 5の書き方があるかもしれません.主に他の人の書いたものを読めるように、自分で書いたら、標準のES 6を書けばいいです.
参照モジュール

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

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

クラスをエクスポート

export default class MyComponent extends Component{
    ...
}

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

コンポーネントを定義

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

コンポーネントの定義方法
コンポーネントの定義方法は名前ではなく、直接名前で書いてください.方法の最後にはコンマがありません.

class Photo extends React.Component {
    componentWillMount() {

    }
    render() {
        return (
            
        );
    }
}

コンポーネントの属性の種類とデフォルトの属性を指定します.
ES 6では、スタティックメンバーを一括して使うことで実現できます.

class Video extends React.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 (
            
        );
    } //               
}

//      
class Video extends React.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,
};

static属性はIE 11で継承できますので、Reactはちょっと面倒かもしれません.React Nativeはこのようなトラブルがありません.
初期化state

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

矢印関数
矢印関数は、実際にはここで一時的な関数を定義しています.矢印関数の矢印=>は、前の括弧、単一のパラメータ名、または括弧で囲まれた複数のパラメータ名です.矢印の後には、式(関数の戻り値として)または括弧で囲まれた関数体とすることができます.(自分でreturnを通じて値を返さないとundefinedが返されます)

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

注意したいのは、bindであろうと、矢印であろうと、実行されるたびに、新しい関数参照が返されますので、関数の引用が必要であれば、他のこと(例えば、アンマウントモニター)を行うと、この参照は自分で保存しなければなりません.

class PauseMenu extends React.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 React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //         arrow function      ，           this  
    }
}

また、矢印関数は、javascript以来のthisの不明確な問題を解決しました.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi
//        ，    setTimeout  this        
//        
//     this  self,  self   this
   says(say){
       var self = this;
       setTimeout(function(){
           console.log(self.type + ' says ' + say)
       }, 1000)
//       bind(this), 
   says(say){
       setTimeout(function(){
           console.log(this.type + ' says ' + say)
       }.bind(this), 1000)

//        
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

矢印関数を使用すると、関数の中のthisオブジェクトが定義されているオブジェクトで、使用時のオブジェクトではなく、矢印関数の内部にthisが結合されているメカニズムがあるためではなく、実際には矢印関数には自分のthisがまったくないため、そのthisは外部から継承されているので、内部のthisは外層コードブロックのthisである.
let,const
この二つの用途はvarと似ています.変数を宣言するために使われています.varは大域的な変数を定義しています.letは実際にJavaScriptのためにブロックレベルの作用領域を追加しました.これを使って宣言した変数はletコマンドがあるコードブロック内だけで有効です.constも変数を宣言しますが、声明の定数です.一度宣言したら定数の値は変更できません.変更を試みます.const宣言の定数を使うと、ブラウザがエラーとなります.

///////////////////////////////var
var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama
////////////////////////////////let
let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach
//////////////////////////////////const
const PI = Math.PI
const monent = require('moment')

クラス文法
ES 6は伝統言語に近い書き方を提供しています.このjavaプログラマは分かりやすいです.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

参照
阮一峰es 6入門React Native中国語コミュニティは30分でES 6/ES 2015の核心内容を把握します.