Deep analysis of react native ES6 grammar _javascript skills

React native is the direct use of ES6 to write code, many new syntax can improve our productivity

Deconstruction Assignment

var {
 Stylesheet,text,view
} = react;

This code is the new deconstruction (destructuring) assignment statement in ES6. Allows you to get multiple properties of an object and assign them to multiple variables using a single statement.

The above code is equivalent to:

var StyleSheet = React.stylesheet;
var Text = React.text;
var View = React.view

Looking at a few more examples, before assigning a value to a variable, you can only specify a value directly:

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

And ES6 allows this to be written:

var [A, B, c] = [1, 2, 3];

More details can be read: The value of the solution of the variable

Arrow function

Similar code often appears in react Native:

The new arrow operator in ES6 => simplifies the writing of functions. The left-hand side of the operator is the input parameter, and the right-hand side is the action performed and the value returned inputs=>outputs

Give a few chestnuts to feel:

var array = [1, 2, 3];
Traditional writing
Array.foreach (function (v, I, a) {
  console.log (v);
});
ES6
Array.foreach (v => console.log (v));
var sum = (NUM1, num2) => {return num1 + num2;}
Equivalent to:
var sum = function (NUM1, num2) {return
  num1 + num2;
 };

For more details, please Google, or view: https://www.imququ.com/post/arrow-function-in-es6.html

Extension operator (spread operator)

This one... The operator (also called the extension operator-spread operator) has been supported by the ES6 array. It allows you to pass an array or an array of classes directly as arguments to a function without using the apply.

var people=[' wayou ', ' John ', ' Sherlock '];
The SayHello function would have received three separate parameters of the Simon, the human two and the human three
function SayHello (people1,people2,people3) {
  console.log (' Hello ${ People1},${people2},${people3} ');
But we pass an array in the form of an extension parameter, which maps well to each individual parameter
SayHello (... people);//output: Hello wayou,john,sherlock 
//And in the past, If you need to pass an array as a parameter, we need to use the Apply method of the function
sayhello.apply (null,people);/output: Hello wayou,john,sherlock

In react, the extension operator is generally used for bulk assignment of attributes. In Jsx, you can use the ... operator that represents the merging of the key-value pairs of an object with the Reactelement props property.

var props = {};
 Props.foo = x;
 Props.bar = y;
 var component = <component {... props}/>;
Equivalent to
var props = {};
 Props.foo = x;
 Props.bar = y;
 var component = <component foo={x} bar={y}/>;
It can also be mixed with ordinary XML attributes, requiring a property with the same name, which overrides the former:
JavaScript
var props = {foo: ' default '};
var component = <component {... props} foo={' override '}/>;
Console.log (Component.props.foo); ' Override '

More details: https://facebook.github.io/react/docs/jsx-spread.html

Class

ES6 added support for classes, introducing the Class keyword (in fact, the class is always reserved in JavaScript for the purpose of taking into account the possibility that it will be used in a later version of it, and is now finally useful). JS itself is object-oriented, the class provided in the ES6 is actually only the JS prototype packaging. With native class support now available, object creation, inheritance is more intuitive and concepts such as invocation of parent methods, instantiation, static methods, and constructors are more visualized.

Class Propertyview extends Component {
  render () {return
    (
      <View></View>
    )
  }
}
//equivalent to
var Propertyview = React.createclass ({
  render () {return
    (
      <View></View>
    )
  }
})

Methods definition (method definition)

In ECMAScript 6, a new syntactic candy called a method definition is introduced, which allows you to write less about a function key, as opposed to the previous complete formulation.

React.createclass ({
  render () {return
    (
      <View></View>
    )
  }
})
// Equivalent to
react.createclass ({
  render:function () {return
    (
      <View></View>
    )
  }
})

Finally, recommend a ES6 ppt, write well: http://khan4019.github.io/ES6/

React native is the direct use of ES6 to write code, many new syntax can improve our productivity

Deconstruction Assignment

var {
	 StyleSheet,
	 Text,
	 View
	} = react;

This code is the new deconstruction (destructuring) assignment statement in ES6. Allows you to get multiple properties of an object and assign them to multiple variables using a single statement.

The above code is equivalent to:

	var StyleSheet = React.stylesheet;
	var Text = React.text;
	var View = React.view

Looking at a few more examples, before assigning a value to a variable, you can only specify a value directly:

 var a =;
 var b =;
 var C =;

And ES allows this to be written:

var [A, B, c] = [,,];

More details can be read: The value of the solution of the variable

Arrow function

Similar code often appears in react Native:
The new arrow operator in ES6 => simplifies the writing of functions. The left-hand side of the operator is the input parameter, and the right-hand side is the action performed and the value returned inputs=>outputs

Give a few chestnuts to feel:

	var array = [,,];
Traditional writing
	Array.foreach (function (v, I, a) {
	  console.log (v);
	});
ES
	Array.foreach (v => console.log (v));
	var sum = (num, num) => {return num + num;}
Equivalent to:
	var sum = function (num, num) {return
	  num + num;
	 };

For more details, please Google, or view: https://www.imququ.com/post/arrow-function-in-es6.html
Extension operator (spread operator)
This one... The operator (also called the extension operator-spread operator) has been supported by the ES6 array. It allows you to pass an array or an array of classes directly as arguments to a function without using the apply.

 var people=[' wayou ', ' John ', ' Sherlock '];
The SayHello function would have received three separate parameters of the Simon, the human two and the human three
 function SayHello (people,people,people) {
   Console.log (Hello ${people},${ People},${people});
But we pass an array in the form of an extension parameter, which maps well to each individual parameter
 SayHello (... people);
Output: Hello wayou,john,sherlock
//And in the past, if you need to pass an array as a parameter, we need to use the Apply method of the function
 sayhello.apply (null,people);
Output: Hello wayou,john,sherlock
and in react, the extension operator is generally used for bulk assignment of attributes. In Jsx, you can use the ... operator that represents the merging of the key-value pairs of an object with the Reactelement props property.
 var props = {};
  Props.foo = x;
  Props.bar = y;
  var component = <component {... props}/>;
Equivalent to
 var props = {};
  Props.foo = x;
  Props.bar = y;
  var component = <component foo={x} bar={y}/>;

It can also be mixed with ordinary XML attributes, requiring the same name, which overrides the former:

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

More details: https://facebook.github.io/react/docs/jsx-spread.html

Class

ES6 added support for classes, introducing the Class keyword (in fact, the class is always reserved in JavaScript for the purpose of taking into account the possibility that it will be used in a later version of it, and is now finally useful). JS itself is object-oriented, the class provided in the ES6 is actually only the JS prototype packaging. With native class support now available, object creation, inheritance is more intuitive and concepts such as invocation of parent methods, instantiation, static methods, and constructors are more visualized.

	Class Propertyview extends Component {
	  render () {return
	    (
	      <View></View>
	    )
	  }
	}
//equivalent to
	var Propertyview = React.createclass ({
	  render () {return
	    (
	      <View></View>
	    )
	  }
	})

Methods definition (method definition)

In ECMAScript 6, a new syntactic candy called a method definition is introduced, which allows you to write less about a function key, as opposed to the previous complete formulation.

 React.createclass ({
   render () {return
     (
       <View></View>
     )
   }
 })
//is equivalent to
 React.createclass ({
   render:function () {return
     (
       <View></View>
     )
   }
 })

The above is a small series to share the react native ES6 grammar, I hope you like.