Analisis mendalam tentang kemahiran syntax_javascript es6 asli bertindak balas-tutorial js-php.cn

React native menggunakan es6 secara langsung untuk menulis kod. Banyak sintaks baharu boleh meningkatkan kecekapan kerja kami

Memusnahkan tugasan

var {
 StyleSheet,Text,View
} = React;

Salin selepas log masuk

Kod ini ialah pernyataan tugasan pemusnah baharu dalam ES6. Membolehkan anda mendapatkan berbilang sifat objek dan menetapkannya kepada berbilang pembolehubah menggunakan satu pernyataan.

Kod di atas adalah bersamaan dengan:

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

Salin selepas log masuk

Lihat beberapa lagi contoh Pada masa lalu, untuk menetapkan nilai kepada pembolehubah, anda hanya boleh menentukan nilai secara langsung:

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

Salin selepas log masuk

Dan ES6 membenarkan penulisan seperti ini:

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

Salin selepas log masuk

Untuk butiran lanjut, sila rujuk: Pemusnahan dan Penetapan Pembolehubah

Fungsi anak panah

Kod serupa selalunya muncul dalam React Native:

Pengendali anak panah baharu => dalam ES6 memudahkan penulisan fungsi. Bahagian kiri operator ialah parameter input, dan sebelah kanan ialah operasi yang dilakukan dan nilai yang dikembalikan Inputs=>outputs

Petik beberapa buah berangan untuk merasainya:

var array = [1, 2, 3];
//传统写法
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;
 };

Salin selepas log masuk

Sila Google untuk mendapatkan butiran lanjut, atau semak: https://www.imququ.com/post/arrow-function-in-es6.html

Pengendali sebaran

Pengendali … (juga dipanggil operator hamparan) sudah disokong oleh tatasusunan ES6. Ia membenarkan melepasi tatasusunan atau fungsi seperti tatasusunan secara langsung sebagai parameter fungsi tanpa melalui penggunaan.

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

Salin selepas log masuk

Dalam React, pengendali hamparan biasanya digunakan untuk penetapan kumpulan atribut. Dalam JSX, anda boleh menggunakan ... operator untuk menggabungkan pasangan nilai kunci objek dengan atribut props ReactElement.

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'

Salin selepas log masuk

Maklumat lanjut: https://facebook.github.io/react/docs/jsx-spread.html

kelas

ES6 menambah sokongan untuk kelas dan memperkenalkan kata kunci kelas (sebenarnya, kelas sentiasa menjadi perkataan simpanan dalam JavaScript, tujuannya adalah untuk mempertimbangkan bahawa ia boleh digunakan dalam versi baharu pada masa hadapan, dan kini ia akhirnya masuk berguna). JS sendiri adalah berorientasikan objek, dan kelas yang disediakan dalam ES6 sebenarnya hanyalah pembungkus untuk corak prototaip JS. Sekarang sokongan kelas asli disediakan, penciptaan objek dan warisan adalah lebih intuitif, dan konsep seperti penyembahan kaedah kelas induk, instantiasi, kaedah statik dan pembina lebih visual.

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

Salin selepas log masuk

Definisi kaedah

Dalam ECMAScript 6, gula sintaks baharu yang dipanggil definisi kaedah diperkenalkan Berbanding dengan kaedah penulisan lengkap sebelumnya, singkatan ini membolehkan anda menulis satu kata kunci fungsi yang kurang.

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

Salin selepas log masuk

Akhir sekali, saya mengesyorkan PPT ES6, yang ditulis dengan baik: http://khan4019.github.io/ES6/

React native menggunakan es6 secara langsung untuk menulis kod. Banyak sintaks baharu boleh meningkatkan kecekapan kerja kami

Memusnahkan tugasan

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

Salin selepas log masuk

Kod ini ialah pernyataan tugasan pemusnah baharu dalam ES6. Membolehkan anda mendapatkan berbilang sifat objek dan menetapkannya kepada berbilang pembolehubah menggunakan satu pernyataan.

Kod di atas adalah bersamaan dengan:

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

Salin selepas log masuk

Lihat beberapa lagi contoh Pada masa lalu, untuk menetapkan nilai kepada pembolehubah, anda hanya boleh menentukan nilai secara langsung:

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

Salin selepas log masuk

Dan ES membenarkan penulisan seperti ini:

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

Salin selepas log masuk

Untuk butiran lanjut, sila rujuk: Pemusnahan dan Penetapan Pembolehubah

Fungsi anak panah

Kod serupa selalunya muncul dalam React Native:
Pengendali anak panah baharu => dalam ES6 memudahkan penulisan fungsi. Bahagian kiri operator ialah parameter input, dan sebelah kanan ialah operasi yang dilakukan dan nilai yang dikembalikan Inputs=>outputs

Petik beberapa buah berangan untuk merasainya:

	var array = [, , ];
//传统写法
	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;
	 };

Salin selepas log masuk

Sila Google untuk mendapatkan butiran lanjut, atau semak: https://www.imququ.com/post/arrow-function-in-es6.html
Operator spread
Operator … (juga dikenali sebagai operator spread) sudah disokong oleh tatasusunan ES6. Ia membenarkan melepasi tatasusunan atau fungsi seperti tatasusunan secara langsung sebagai parameter fungsi tanpa melalui penggunaan.

 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} />;

Salin selepas log masuk

Ia juga boleh dicampur dengan atribut XML biasa Atribut dengan nama yang sama diperlukan, dan atribut yang kedua akan menggantikan yang pertama:

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo);
// 'override'

Salin selepas log masuk

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>
	    )
	  }
	})

Salin selepas log masuk

方法定义(method definition)

ECMAScript 6中,引入了一种名叫方法定义(method definition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.

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

Salin selepas log masuk

以上是小编给大家分享的react native es6语法，希望大家喜欢。