In-depth analysis of react native es6 syntax_javascript skills

React native uses es6 directly to write code. Many new syntaxes can improve our work efficiency

Destructuring assignment

var {
 StyleSheet,Text,View
} = React;

This code is the new destructuring assignment statement in ES6. Allows you to obtain 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

Look at a few more examples. In the past, to assign a value to a variable, you could only specify the value directly:

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

And ES6 allows writing like this:

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

For more details, please refer to: Destructuring and Assignment of Variables

Arrow function

Similar codes often appear in React Native:

The new arrow operator => in ES6 simplifies the writing of functions. The left side of the operator is the input parameters, and the right side is the operation performed and the returned value Inputs=>outputs

Cite a few chestnuts to feel it:

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

Please Google for more details, or check: https://www.imququ.com/post/arrow-function-in-es6.html

Spread operator

The … operator (also called the spread operator) is already supported by ES6 arrays. It allows passing arrays or array-like functions directly as parameters of functions without going through 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

In React, the spread operator is generally used for batch assignment of attributes. In JSX, you can use the ... operator to merge the key-value pair of an object with the props attribute of 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'

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

class

ES6 added support for classes and introduced the class keyword (in fact, class has always been a reserved word in JavaScript, the purpose is to consider that it may be used in new versions in the future, and now it finally comes in handy) . JS itself is object-oriented, and the classes provided in ES6 are actually just wrappers for the JS prototype pattern. Now that native class support is provided, object creation and inheritance are more intuitive, and concepts such as parent class method invocation, instantiation, static methods, and constructors are more visual.

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

Method definition

In ECMAScript 6, a new syntax sugar called method definition is introduced. Compared with the previous complete writing method, this abbreviation allows you to write one less function key word.

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

Finally, I recommend an ES6 PPT, which is well written: http://khan4019.github.io/ES6/

React native uses es6 directly to write code. Many new syntaxes can improve our work efficiency

Destructuring assignment

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

This code is the new destructuring assignment statement in ES6. Allows you to obtain 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

Look at a few more examples. In the past, to assign a value to a variable, you could only specify the value directly:

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

And ES allows writing like this:

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

For more details, please refer to: Destructuring and Assignment of Variables

Arrow function

Similar codes often appear in React Native:
The new arrow operator => in ES6 simplifies the writing of functions. The left side of the operator is the input parameters, and the right side is the operation performed and the returned value Inputs=>outputs

Cite a few chestnuts to feel it:

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

Please Google for more details, or check: https://www.imququ.com/post/arrow-function-in-es6.html
Spread operator
The … operator (also called the spread operator) is already supported by ES6 arrays. It allows passing arrays or array-like functions directly as parameters of functions without going through 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} />;

It can also be mixed with ordinary XML attributes. An attribute with the same name is required, and the latter will override the former:

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