深入淺析react native es6文法_javascript技巧

來源:互聯網
上載者:User

react native是直接使用es6來編寫代碼,許多新文法能提高我們的工作效率

解構賦值

var { StyleSheet,Text,View} = React;

這句代碼是ES6 中新增的解構(Destructuring)指派陳述式。准許你擷取對象的多個屬性並且使用一條語句將它們賦給多個變數。

上面的代碼等價於:

var StyleSheet = React.StyleSheet;var Text = React.Text;var View = React.View

再看幾個例子,以前,為變數賦值,只能直接指定值:

var a = 1;var b = 2;var c = 3;

而ES6 允許這樣寫:

var [a, b, c] = [1, 2, 3];

更詳細的內容可參看:變數的解構賦值

箭頭函數

React Native 裡面經常會出現類似的代碼:

ES6中新增的箭頭操作符=> 簡化了函數的書寫。操作符左邊為輸入的參數,而右邊則是進行的操作以及返回的值Inputs=>outputs

舉幾個栗子感受下:

var array = [1, 2, 3];//傳統寫法array.forEach(function(v, i, a) {  console.log(v);});//ES6array.forEach(v => console.log(v));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。

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屬性合并。

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屬性混合使用,需要同名屬性,後者將覆蓋前者:JavaScriptvar 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支援後,對象的建立,繼承更加直觀了,並且父類方法的調用,執行個體化,靜態方法和建構函式等概念都更加形象化。

class PropertyView extends Component {  render() {    return (      <View></View>    )  }}//等價於var PropertyView = React.createClass({  render() {    return (      <View></View>    )  }})

 方法定義(method definition)

ECMAScript 6中,引入了一種名叫方法定義(method definition)的新文法糖,相對於以前的完整寫法,這種簡寫形式可以讓你少寫一個function鍵字.

React.createClass({  render() {    return (      <View></View>    )  }})//等價於React.createClass({  render : function() {    return (      <View></View>    )  }})

最後,推薦一個ES6的PPT,寫得不錯:http://khan4019.github.io/ES6/

react native是直接使用es6來編寫代碼,許多新文法能提高我們的工作效率

解構賦值

var { StyleSheet, Text, View} = React;

這句代碼是ES6 中新增的解構(Destructuring)指派陳述式。准許你擷取對象的多個屬性並且使用一條語句將它們賦給多個變數。

上面的代碼等價於:

var StyleSheet = React.StyleSheet;var Text = React.Text;var View = React.View

再看幾個例子,以前,為變數賦值,只能直接指定值:

 var a = ; var b = ; var c = ;

而ES 允許這樣寫:

var [a, b, c] = [, , ];

更詳細的內容可參看:變數的解構賦值

箭頭函數

React Native 裡面經常會出現類似的代碼:
ES6中新增的箭頭操作符=> 簡化了函數的書寫。操作符左邊為輸入的參數,而右邊則是進行的操作以及返回的值Inputs=>outputs

舉幾個栗子感受下:

var array = [, , ];//傳統寫法array.forEach(function(v, i, a) {  console.log(v);});//ESarray.forEach(v => console.log(v));var sum = (num, num) => { return num + num; }//等同於:var sum = function(num, num) {  return num + num; };

更多詳細內容請自行Google,或查看:https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spread operator)
這個 … 操作符(也被叫做延展操作符 - spread operator)已經被 ES6 數組 支援。它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

 var people=['Wayou','John','Sherlock'];//sayHello函數本來接收三個單獨的參數人妖,人二和人三 function sayHello(people,people,people){   console.log(Hello ${people},${people},${people}); }//但是我們將一個數組以拓展參數的形式傳遞,它能很好地映射到每個單獨的參數 sayHello(...people);//輸出:Hello Wayou,John,Sherlock//而在以前,如果需要傳遞數組當參數,我們需要使用函數的apply方法 sayHello.apply(null,people);//輸出:Hello Wayou,John,Sherlock而在React中,延展操作符一般用於屬性的批量賦值上。在JSX中,可以使用…運算子,表示將一個對象的索引值對與ReactElement的props屬性合并。 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屬性混合使用,需要同名屬性,後者將覆蓋前者:

 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支援後,對象的建立,繼承更加直觀了,並且父類方法的調用,執行個體化,靜態方法和建構函式等概念都更加形象化。

class PropertyView extends Component {  render() {    return (      <View></View>    )  }}//等價於var PropertyView = React.createClass({  render() {    return (      <View></View>    )  }})

方法定義(method definition)

ECMAScript 6中,引入了一種名叫方法定義(method definition)的新文法糖,相對於以前的完整寫法,這種簡寫形式可以讓你少寫一個function鍵字.

 React.createClass({   render() {     return (       <View></View>     )   } })//等價於 React.createClass({   render : function() {     return (       <View></View>     )   } })

以上是小編給大家分享的react native es6文法,希望大家喜歡。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.