Analysis of ES6 syntax in react native

React native is directly using es6 to write code, many new syntax can improve our work efficiency

Destructuring assignment
var {
  StyleSheet,
  Text,
  View
} = React;
This code is a new destructuring assignment statement in ES6. Allows you to obtain multiple attributes 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
Let's look at a few more examples. Previously, when assigning values to variables, you could only specify values directly:

var a = 1;
var b = 2;
var c = 3;
ES6 allows this:

var [a, b, c] = [1, 2, 3];
For more details, see: Destructuring and Assigning Variables

Arrow function
Similar code often appears in React Native:

The new arrow operator in ES6 => simplifies the writing of functions. The left side of the operator is the input parameter, and the right side is the operation and the returned value 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 go to Google yourself, or view: https://www.imququ.com/post/arrow-function-in-es6.html

Spread operator
The… operator (also known as the spread operator-spread operator) has been supported by ES6 arrays. It allows passing arrays or array-like arrays directly as function parameters without applying them.

var people = [‘Wayou’, ‘John’, ‘Sherlock’];
// The sayHello function originally received three separate parameters: shemale, human two and human three
function sayHello (people1, people2, people3) {
    console.log (`Hello $ {people1}, $ {people2}, $ {people3}`);
}
// But we pass an array in the form of extended parameters, it can be well mapped to each individual parameter
sayHello (... people); // Output: Hello Wayou, John, Sherlock

// In the past, if we 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 batch assignment of attributes. In JSX, you can use the ... operator, which means merging the key-value pair of an object with the props property of ReactElement.

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 used in combination with ordinary XML attributes. Attributes with the same name are required. The latter will override 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 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 future new versions, and now it finally comes in handy). JS itself is object-oriented, and the classes provided in ES6 are actually just wrappers of the JS prototype pattern. Now that native class support is provided, object creation and inheritance are more intuitive, and the concepts of parent class method invocation, instantiation, static methods, and constructors are more visual.

class PropertyView extends Component {
    render () {
        return (
            <View> </ View>
        )
    }
}

//Equivalent to
var PropertyView = React.createClass ({
    render () {
        return (
            <View> </ View>
        )
    }
})
Method definition
In ECMAScript 6, a new syntactic sugar called method definition is introduced.Compared with the previous complete writing, this shorthand form allows you to write a function key less.

React.createClass ({
    render () {
        return (
            <View> </ View>
        )
    }
})

//Equivalent to

React.createClass ({
    render: function () {
        return (
            <View> </ View>
        )
    }
})
Finally, I recommend an ES6 PPT, well written: http://khan4019.github.io/ES6/

es6 syntax analysis in react native