Use some ES6 syntax in React, let’s summarize here! By borrowing a lot of blogs written by God, if there are similar, don’t spray! Only for personal learning summary! Thanks
Mainly learn from the following sites:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Liao Xuefeng’s site:
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001438565969057627e5435793645b7acaee3b6869d1374000

Arrow function expression

1. Definition of arrow functions:

The function above

x => x+x;

is equivalent to:

function(x){
    
    return x+x;
}

2, the syntax of the arrow function:

1. Basic grammar:

param1，param2，param3，...，paramN）=> {statements}
(param1，param2，param3,..., paramn) => expression 
 // equivalent at => {{return: Expression} 

 When there was only one parameter, parentheses were optional. Conversely, multiple parameters must be added with brackets: 
 (SingleParam) => {statements} or singleparam => {statements} 

 When there is no parameter, you can write a pair of small brackets directly: 
 () => {statements}

2. Advanced grammar:

The following related content can be referred to:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

parentheast function body, return object text expression: 
 Note: If the object to be returned is a single expression, you must use parentheses, otherwise an error will be reported 
 Params => {ecmascript:"test"}   // SyntaxError:
params => ({ECMAScript:"test"}) // ok 

 // The rest of the mechanical parameters and default parameters are supported 
 (Param1, Param2,... rest）=> {statements} 
(param1 = defaultValue1，param2，..., Paramn = DEFAULTVALUEN) => {statement} 

 // The deconstructed parameter list also supports 
 var f = ([a, b] = [1,2]，{x：c} = {x：a + b}）=> a + b + c;
F（）; // 6

3. Advantages of the arrow function

The sentence of the arrow function is short and does not have binding force this.

1. The sentence is relatively short

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element ) {
     
  return element.length; 
}); // [8, 6, 7, 9]

elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

elements.map(({ length }) => length); // [8, 6, 7, 9]

2. There is no separate this in the arrow function

The

arrow function looks similar to the abbreviation of anonymous functions, but there is an obvious difference: This inside the arrow function is a lexical scope, which is determined by the context.
For example: as follows, this is only to Window, so the result of our expectations cannot be obtained

var obj = {
    birth: 1990,
    getAge: function () {
    
        var b = this.birth; // 1990
        var fn = function () {
    
            return new Date().getFullYear() - this.birth; // this point to Window or UNDEFINED
        };
        return fn();
    }
};

Now the arrow function fixes this direction, and the modification code is as follows: you can get the expected results

var obj = {
    birth: 1990,
    getAge: function () {
    
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this point to OBJ object
        return fn();
    }
};
obj.getAge(); // 25

Use the arrow function, the previous hack writing doesn’t need it.

var that = this;

Since this has been bound in the arrow function in the arrow function, when calling the arrow function with call () or apply (), you cannot bind this, that is, the first parameter passed in is ignored:

var obj = {
    birth: 1990,
    getAge: function (year) {
    
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.bringh is still 1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

4. You need to pay attention to a few problems with the arrow function

1. The arrow function cannot be used as a constructor, and an error will be thrown when used

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

2. The arrow function does not have the prototype property

var Foo = () => {};
console.log(Foo.prototype); // undefined

3. In the simple subject, only one expression is specified, which is an explicit return value. In the block, the explicit Return statement must be used.

var func = x => x * x;                  
//When there is only one expression, you can write x*x directly;var func = (x, y) => { return x + y; }; 
//When there are two parameters, you must usereturnstatement;

4. The arrow function cannot include a change symbol between its parameters and its arrows.

The

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

article mainly borrows the two official website above! Only for personal learning!