快捷導(dǎo)航

深入淺析react native es6語法

更新時間：2015年12月09日 11:23:25 投稿：mrr

這篇文章主要介紹了深入淺析react native es6語法的相關(guān)資料,需要的朋友可以參考下

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

解構(gòu)賦值

var {
 StyleSheet,Text,View
} = React;

這句代碼是ES6 中新增的解構(gòu)(Destructuring)賦值語句。準(zhǔn)許你獲取對象的多個屬性并且使用一條語句將它們賦給多個變量。

上面的代碼等價于：

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];

更詳細(xì)的內(nèi)容可參看：變量的解構(gòu)賦值

箭頭函數(shù)

React Native 里面經(jīng)常會出現(xiàn)類似的代碼:

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

舉幾個栗子感受下：

var array = [1, 2, 3];
//傳統(tǒng)寫法
array.forEach(function(v, i, a) {
  console.log(v);
});
//ES6
array.forEach(v => console.log(v));
var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {
  return num1 + num2;
 };

更多詳細(xì)內(nèi)容請自行Google，或查看：https://www.imququ.com/post/arrow-function-in-es6.html

延展操作符(Spread operator)

這個 … 操作符（也被叫做延展操作符－ spread operator）已經(jīng)被 ES6 數(shù)組支持。它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。

var people=['Wayou','John','Sherlock'];
//sayHello函數(shù)本來接收三個單獨的參數(shù)人妖，人二和人三
function sayHello(people1,people2,people3){
  console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我們將一個數(shù)組以拓展參數(shù)的形式傳遞，它能很好地映射到每個單獨的參數(shù)
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 
//而在以前，如果需要傳遞數(shù)組當(dāng)參數(shù)，我們需要使用函數(shù)的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屬性混合使用，需要同名屬性，后者將覆蓋前者：
JavaScript
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

更多詳細(xì)信息：https://facebook.github.io/react/docs/jsx-spread.html

class

ES6中添加了對類的支持，引入了class關(guān)鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到，現(xiàn)在終于派上用場了）。JS本身就是面向?qū)ο蟮模珽S6中提供的類實際上只是JS原型模式的包裝?，F(xiàn)在提供原生的class支持后，對象的創(chuàng)建，繼承更加直觀了，并且父類方法的調(diào)用，實例化，靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化。

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來編寫代碼，許多新語法能提高我們的工作效率

解構(gòu)賦值

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

這句代碼是ES6 中新增的解構(gòu)(Destructuring)賦值語句。準(zhǔn)許你獲取對象的多個屬性并且使用一條語句將它們賦給多個變量。

上面的代碼等價于：

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

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

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

而ES 允許這樣寫：

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

更詳細(xì)的內(nèi)容可參看：變量的解構(gòu)賦值

箭頭函數(shù)

React Native 里面經(jīng)常會出現(xiàn)類似的代碼:
ES6中新增的箭頭操作符=> 簡化了函數(shù)的書寫。操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs

舉幾個栗子感受下：

	var array = [, , ];
//傳統(tǒng)寫法
	array.forEach(function(v, i, a) {
	  console.log(v);
	});
//ES
	array.forEach(v => console.log(v));
	var sum = (num, num) => { return num + num; }
//等同于：
	var sum = function(num, num) {
	  return num + num;
	 };

更多詳細(xì)內(nèi)容請自行Google，或查看：https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spread operator)
這個 … 操作符（也被叫做延展操作符－ spread operator）已經(jīng)被 ES6 數(shù)組支持。它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。

 var people=['Wayou','John','Sherlock'];
//sayHello函數(shù)本來接收三個單獨的參數(shù)人妖，人二和人三
 function sayHello(people,people,people){
   console.log(Hello ${people},${people},${people});
 }
//但是我們將一個數(shù)組以拓展參數(shù)的形式傳遞，它能很好地映射到每個單獨的參數(shù)
 sayHello(...people);
//輸出：Hello Wayou,John,Sherlock
//而在以前，如果需要傳遞數(shù)組當(dāng)參數(shù)，我們需要使用函數(shù)的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'

更多詳細(xì)信息：https://facebook.github.io/react/docs/jsx-spread.html

class

ES6中添加了對類的支持，引入了class關(guān)鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到，現(xiàn)在終于派上用場了）。JS本身就是面向?qū)ο蟮?，ES6中提供的類實際上只是JS原型模式的包裝。現(xiàn)在提供原生的class支持后，對象的創(chuàng)建，繼承更加直觀了，并且父類方法的調(diào)用，實例化，靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化。

	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語法，希望大家喜歡。

您可能感興趣的文章: