在React或者ReactNative學習和使用過程中，首先一個特點是看不太懂疤苹。因為它使用的是ES2015（ES6）的語法互广。特此從網(wǎng)上整理了一些必知必會的ES6知識點。大部分是引用的卧土，后期自己有了心得也會更新這個文章惫皱。
ES6
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了尤莺。它的目標旅敷，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言颤霎。
語法說明
以說明ES6為主扫皱，后面可能會帶上ES5的一些寫法，主要是為了能夠看懂別人寫的東西捷绑，自己寫的話，就寫標準的ES6就好了氢妈。
引用模塊
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 (
<Image source={this.props.source} />
);
}
}
////ES5
var Photo = React.createClass({
render: function() {
return (
<Image source={this.props.source} />
);
},
});
定義組件方法
給組件定義方法不再用 名字: function()的寫法粹污，而是直接用名字()，在方法的最后也不能有逗號了
class Photo extends React.Component {
componentWillMount() {
}
render() {
return (
<Image source={this.props.source} />
);
}
}
定義組件的屬性類型和默認屬性
ES6里首量，可以統(tǒng)一使用static成員來實現(xiàn)
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 (
<View />
);
} // 注意這里既沒有分號也沒有逗號
}
//也可以這么寫
class Video extends React.Component {
render() {
return (
<View />
);
}
}
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屬性在IE11才可以繼承壮吩，React可能會有些麻煩进苍，ReactNative不存在這樣的麻煩。
初始化state
class Video extends React.Component {
state = {
loopsRemaining: this.props.maxLoops,
}
}
// 還可以寫在構(gòu)造函數(shù)中
class Video extends React.Component {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}
箭頭函數(shù)
箭頭函數(shù)實際上是在這里定義了一個臨時的函數(shù)鸭叙，箭頭函數(shù)的箭頭=>之前是一個空括號觉啊、單個的參數(shù)名、或用括號括起的多個參數(shù)名沈贝，而箭頭之后可以是一個表達式（作為函數(shù)的返回值）杠人，或者是用花括號括起的函數(shù)體（需要自行通過return來返回值，否則返回的是undefined）
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
需要注意的是宋下，不論是bind還是箭頭函數(shù)嗡善，每次被執(zhí)行都返回的是一個新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器）学歧，那么你必須自己保存這個引用罩引。
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指針
}
}
另外箭頭函數(shù)還解決了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指向的是全局對象
//傳統(tǒng)解決方式如下
//第一種是將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
當我們使用箭頭函數(shù)時，函數(shù)體內(nèi)的this對象横浑，就是定義時所在的對象剔桨，而不是使用時所在的對象。并不是因為箭頭函數(shù)內(nèi)部有綁定this的機制伪嫁，實際原因是箭頭函數(shù)根本沒有自己的this领炫，它的this是繼承外面的，因此內(nèi)部的this就是外層代碼塊的this张咳。
let, const
這兩個的用途與var類似帝洪，都是用來聲明變量的。var 定義的是全局的變量脚猾，而let則實際上為JavaScript新增了塊級作用域葱峡。用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效龙助。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')
class 語法
ES6提供了更接近傳統(tǒng)語言的寫法胸哥，這個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
