Eingehende Analyse der reaktiven nativen ES6-Syntax_Javascript-Fähigkeiten

React Native verwendet es6 direkt zum Schreiben von Code. Viele neue Syntaxen können unsere Arbeitseffizienz verbessern

Destrukturierungsauftrag

var {
 StyleSheet,Text,View
} = React;

Dieser Code ist die neue destrukturierende Zuweisungsanweisung in ES6. Ermöglicht Ihnen, mehrere Eigenschaften eines Objekts abzurufen und sie mit einer einzigen Anweisung mehreren Variablen zuzuweisen.

Der obige Code entspricht:

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

Sehen Sie sich noch ein paar Beispiele an. Um einer Variablen einen Wert zuzuweisen, konnten Sie den Wert bisher nur direkt angeben:

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

Und ES6 ermöglicht das Schreiben wie folgt:

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

Weitere Einzelheiten finden Sie unter: Destrukturierung und Zuweisung von Variablen

Pfeilfunktion

Ähnliche Codes erscheinen häufig in React Native:

Der neue Pfeiloperator => in ES6 vereinfacht das Schreiben von Funktionen. Die linke Seite des Operators sind die Eingabeparameter und die rechte Seite ist die ausgeführte Operation und der zurückgegebene Wert Inputs=>outputs

Zeigen Sie ein paar Kastanien, um es zu spüren:

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

Bitte googeln Sie für weitere Details oder schauen Sie nach: https://www.imququ.com/post/arrow-function-in-es6.html

Spread-Operator

Der …-Operator (auch Spread-Operator genannt) wird bereits von ES6-Arrays unterstützt. Es ermöglicht die direkte Übergabe von Arrays oder arrayähnlichen Funktionen als Parameter von Funktionen, ohne dass ein Apply-Vorgang erforderlich ist.

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

In React wird der Spread-Operator im Allgemeinen für die Stapelzuweisung von Attributen verwendet. In JSX können Sie den ...-Operator verwenden, um das Schlüssel-Wert-Paar eines Objekts mit dem props-Attribut von ReactElement zusammenzuführen.

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'

Weitere Details: https://facebook.github.io/react/docs/jsx-spread.html

Klasse

ES6 hat die Unterstützung für Klassen hinzugefügt und das Schlüsselwort „class“ eingeführt (tatsächlich war „class“ in JavaScript immer ein reserviertes Wort, der Zweck besteht darin, zu berücksichtigen, dass es in Zukunft in neuen Versionen verwendet werden kann, und jetzt ist es endlich verfügbar praktisch). JS selbst ist objektorientiert und die in ES6 bereitgestellten Klassen sind eigentlich nur Wrapper für das JS-Prototypmuster. Da nun native Klassenunterstützung bereitgestellt wird, sind die Objekterstellung und -vererbung intuitiver und Konzepte wie der Methodenaufruf der übergeordneten Klasse, Instanziierung, statische Methoden und Konstruktoren sind visueller.

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

Methodendefinition

In ECMAScript 6 wird ein neuer Syntaxzucker namens Methodendefinition eingeführt. Im Vergleich zur vorherigen vollständigen Schreibmethode können Sie mit dieser Abkürzung ein Funktionsschlüsselwort weniger schreiben.

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

Abschließend empfehle ich ein ES6-PPT, das gut geschrieben ist: http://khan4019.github.io/ES6/

React Native verwendet es6 direkt zum Schreiben von Code. Viele neue Syntaxen können unsere Arbeitseffizienz verbessern

Destrukturierungsauftrag

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

Dieser Code ist die neue destrukturierende Zuweisungsanweisung in ES6. Ermöglicht Ihnen, mehrere Eigenschaften eines Objekts abzurufen und sie mit einer einzigen Anweisung mehreren Variablen zuzuweisen.

Der obige Code entspricht:

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

Sehen Sie sich noch ein paar Beispiele an. Um einer Variablen einen Wert zuzuweisen, konnten Sie den Wert bisher nur direkt angeben:

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

Und ES erlaubt das Schreiben wie folgt:

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

Weitere Einzelheiten finden Sie unter: Destrukturierung und Zuweisung von Variablen

Pfeilfunktion

Ähnliche Codes erscheinen häufig in React Native:
Der neue Pfeiloperator => in ES6 vereinfacht das Schreiben von Funktionen. Die linke Seite des Operators sind die Eingabeparameter und die rechte Seite ist die ausgeführte Operation und der zurückgegebene Wert Inputs=>outputs

Zeigen Sie ein paar Kastanien, um es zu spüren:

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

Bitte googeln Sie für weitere Details oder schauen Sie nach: https://www.imququ.com/post/arrow-function-in-es6.html
Spread-Operator
Der …-Operator (auch Spread-Operator genannt) wird bereits von ES6-Arrays unterstützt. Es ermöglicht die direkte Übergabe von Arrays oder arrayähnlichen Funktionen als Parameter von Funktionen, ohne dass ein Apply-Vorgang erforderlich ist.

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

Es kann auch mit gewöhnlichen XML-Attributen gemischt werden. Ein Attribut mit demselben Namen ist erforderlich, und letzteres überschreibt ersteres:

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