Analyse approfondie des compétences React Native Es6 Syntax_Javascript

React native utilise es6 directement pour écrire du code De nombreuses nouvelles syntaxes peuvent améliorer notre efficacité de travail

Mission de déstructuration

var {
 StyleSheet,Text,View
} = React;

Ce code est la nouvelle instruction d'affectation de déstructuration dans ES6. Vous permet d'obtenir plusieurs propriétés d'un objet et de les affecter à plusieurs variables à l'aide d'une seule instruction.

Le code ci-dessus est équivalent à :

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

Regardez quelques exemples supplémentaires. Dans le passé, pour attribuer une valeur à une variable, vous ne pouviez spécifier que la valeur directement :

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

Et ES6 permet d'écrire comme ceci :

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

Pour plus de détails, veuillez vous référer à : Déstructuration et affectation des variables

Fonction flèche

Des codes similaires apparaissent souvent dans React Native :

Le nouvel opérateur flèche => dans ES6 simplifie l'écriture des fonctions. Le côté gauche de l'opérateur correspond aux paramètres d'entrée, et le côté droit est l'opération effectuée et la valeur renvoyée Inputs=>outputs

Citer quelques châtaignes pour le ressentir :

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

Veuillez rechercher Google pour plus de détails ou consultez : https://www.imququ.com/post/arrow-function-in-es6.html

Opérateur de spread

L'opérateur … (également appelé opérateur spread) est déjà pris en charge par les baies ES6. Il permet de transmettre des tableaux ou des fonctions de type tableau directement en tant que paramètres de fonctions sans passer par l'application.

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

Dans React, l'opérateur spread est généralement utilisé pour l'attribution par lots d'attributs. Dans JSX, vous pouvez utiliser l'opérateur ... pour fusionner la paire clé-valeur d'un objet avec l'attribut props de 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'

Plus de détails : https://facebook.github.io/react/docs/jsx-spread.html

cours

ES6 a ajouté le support des classes et introduit le mot-clé class (en fait, class a toujours été un mot réservé en JavaScript, le but est de considérer qu'il pourra être utilisé dans de nouvelles versions à l'avenir, et maintenant il arrive enfin pratique) . JS lui-même est orienté objet et les classes fournies dans ES6 ne sont en réalité que des wrappers pour le modèle de prototype JS. Maintenant que la prise en charge des classes natives est fournie, la création et l'héritage d'objets sont plus intuitifs et les concepts tels que l'invocation de méthodes de classe parent, l'instanciation, les méthodes statiques et les constructeurs sont plus visuels.

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

Définition de la méthode

Dans ECMAScript 6, un nouveau sucre de syntaxe appelé définition de méthode est introduit. Par rapport à la méthode d'écriture complète précédente, cette abréviation vous permet d'écrire un mot clé de fonction de moins.

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

Enfin, je recommande un PPT ES6, qui est bien écrit : http://khan4019.github.io/ES6/

React native utilise es6 directement pour écrire du code De nombreuses nouvelles syntaxes peuvent améliorer notre efficacité de travail

Mission de déstructuration

var {
     StyleSheet,
     Text,
     View
    } = React;

Ce code est la nouvelle instruction d'affectation de déstructuration dans ES6. Vous permet d'obtenir plusieurs propriétés d'un objet et de les affecter à plusieurs variables à l'aide d'une seule instruction.

Le code ci-dessus est équivalent à :

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

Regardez quelques exemples supplémentaires. Dans le passé, pour attribuer une valeur à une variable, vous ne pouviez spécifier que la valeur directement :

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

Et ES permet d'écrire comme ceci :

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

Pour plus de détails, veuillez vous référer à : Déstructuration et affectation des variables

Fonction flèche

Des codes similaires apparaissent souvent dans React Native :
Le nouvel opérateur de flèche => dans ES6 simplifie l'écriture de fonctions. Le côté gauche de l'opérateur correspond aux paramètres d'entrée, et le côté droit est l'opération effectuée et la valeur renvoyée Inputs=>outputs

Citer quelques châtaignes pour le ressentir :

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

Veuillez rechercher Google pour plus de détails ou consultez : https://www.imququ.com/post/arrow-function-in-es6.html
Opérateur de diffusion
L'opérateur … (également appelé opérateur spread) est déjà pris en charge par les baies ES6. Il permet de transmettre des tableaux ou des fonctions de type tableau directement en tant que paramètres de fonctions sans passer par l'application.

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

Il peut également être mélangé avec des attributs XML ordinaires. Un attribut du même nom est requis, et ce dernier remplacera le premier :

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