react native是直接使用es6來編寫程式碼，許多新語法能提高我們的工作效率
解構賦值
|
1 2 3 4 5 |
var { StyleSheet, Text, View } = React; |
這句程式碼是ES6 中新增的解構(Destructuring)賦值語句。准許你獲取物件的多個屬性並且使用一條語句將它們賦給多個變數。
上面的程式碼等價於：
|
1 2 3 |
var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View |
再看幾個例子，以前，為變數賦值，只能直接指定值:
|
1 2 3 |
var a = 1; var b = 2; var c = 3; |
而ES6 允許這樣寫：
|
1 |
var [a, b, c] = [1, 2, 3]; |
更詳細的內容可參看：變數的解構賦值
箭頭函式
React Native 裡面經常會出現類似的程式碼:
ES6中新增的箭頭操作符=> 簡化了函式的書寫。操作符左邊為輸入的引數，而右邊則是進行的操作以及返回的值Inputs=>outputs
舉幾個栗子感受下：
|
1 2 3 4 5 6 7 |
var array = [1, 2, 3]; //傳統寫法 array.forEach(function(v, i, a) { console.log(v); }); //ES6 array.forEach(v => console.log(v)); |
|
1 2 3 4 5 |
var sum = (num1, num2) => { return num1 + num2; } //等同於： var sum = function(num1, num2) { return num1 + num2; }; |
更多詳細內容請自行Google，或檢視：https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spread operator)
這個 … 操作符（也被叫做延展操作符 － spread operator）已經被 ES6 陣列 支援。它允許傳遞陣列或者類陣列直接做為函式的引數而不用通過apply。
|
1 2 3 4 5 6 7 8 9 10 |
var people=['Wayou','John','Sherlock']; //sayHello函式本來接收三個單獨的引數人妖，人二和人三 function sayHello(people1,people2,people3){ console.log(`Hello ${people1},${people2},${people3}`); } //但是我們將一個陣列以擴充引數的形式傳遞，它能很好地對映到每個單獨的引數 sayHello(...people);//輸出：Hello Wayou,John,Sherlock //而在以前，如果需要傳遞陣列當引數，我們需要使用函式的apply方法 sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock |
而在React中，延展操作符一般用於屬性的批量賦值上。在JSX中，可以使用…運算子，表示將一個物件的鍵值對與ReactElement的props屬性合併。
|
1 2 3 4 5 6 7 8 9 10 |
var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />; //等價於 var props = {}; props.foo = x; props.bar = y; var component = <Component foo={x} bar={y} />; |
它也可以和普通的XML屬性混合使用，需要同名屬性，後者將覆蓋前者：
|
1 2 3 4 |
var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />; console.log(component.props.foo); // 'override' 更多詳細資訊：https://facebook.github.io/react/docs/jsx-spread.html |
class
ES6中新增了對類的支援，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以後的新版本中會用到，現在終於派上用場了）。JS本身就是物件導向的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支援後，物件的建立，繼承更加直觀了，並且父類方法的呼叫，例項化，靜態方法和建構函式等概念都更加形象化。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class PropertyView extends Component { render() { return ( <View></View> ) } } //等價於 var PropertyView = React.createClass({ render() { return ( <View></View> ) } }) |
方法定義(method definition)
ECMAScript 6中,引入了一種名叫方法定義(method definition)的新語法糖,相對於以前的完整寫法,這種簡寫形式可以讓你少寫一個function鍵字.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
React.createClass({ render() { return ( <View></View> ) } }) //等價於 React.createClass({ render : function() { return ( <View></View> ) } }) |
最後，推薦一個ES6的PPT，寫得不錯：http://khan4019.github.io/ES6/