Que sont React et Es6

react est un framework de développement JavaScript déclaratif, efficace et flexible lancé par Facebook pour créer des interfaces utilisateur ; il fournit aux programmeurs un modèle dans lequel les sous-composants ne peuvent pas affecter directement les composants externes. Lorsque les données changent, le document HTML est mis à jour de manière efficace et propre. séparation entre les composants dans les applications modernes d'une seule page. es6 est la prochaine version standard de JavaScript. Son objectif est de permettre au langage JavaScript d'être utilisé pour écrire des applications complexes à grande échelle et de devenir un langage de développement au niveau de l'entreprise.

L'environnement d'exploitation de ce tutoriel : système windows7, version ECMAScript 6&&react18, ordinateur Dell G3.

Qu'est-ce que React

---

react.js est un framework de développement JavaScript lancé par Facebook pour créer des interfaces utilisateur.

React est une bibliothèque JavaScript déclarative, efficace et flexible pour créer des interfaces utilisateur. React vous permet de combiner des extraits de code courts et indépendants dans des interfaces utilisateur complexes. Ces extraits de code sont appelés « composants ».

Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et la logique du code est très simple. Par conséquent, de plus en plus de gens commencent à y prêter attention et à l’utiliser, pensant qu’il pourrait devenir l’outil principal de développement Web à l’avenir.

React est une bibliothèque JavaScript open source qui fournit des vues HTML pour les données. Les vues React sont généralement rendues à l'aide de composants contenant d'autres composants spécifiés dans des balises HTML personnalisées. React fournit aux programmeurs un modèle dans lequel les composants enfants ne peuvent pas affecter directement les composants externes, des mises à jour efficaces des documents HTML lorsque les données changent et une séparation nette entre les composants dans les applications modernes d'une seule page.

Les avantages de React sont :

• Plus adapté aux grandes applications et une meilleure testabilité

• Applications natives Web et mobiles

• Un écosystème plus vaste, des outils plus performants et faciles à utiliser

• Plus adapté aux projets de taille moyenne et grande

Qu'est-ce que es6

---

es6 signifie ECMAScript6 (la 6ème version d'ECMAScript), qui est un langage JavaScript officiellement publié en juin 2015, officiellement appelé ECMAScript 2015 (ES2015).

ECMAScript 6 est fondamentalement devenu le standard de l'industrie. Sa popularité est beaucoup plus rapide que ES5. La raison principale est que les navigateurs modernes prennent en charge ES6 très rapidement, en particulier les navigateurs Chrome et Firefox, qui prennent déjà en charge la grande majorité des fonctionnalités d'ES6.

Depuis, ECMA Script publie chaque année une version majeure pour ajouter de nouvelles fonctionnalités importantes, que nous appelons ES6+.

Comprendre la relation entre ES et JS

ES = ECMAScript est le « standard » pour un langage de script dynamique, JS = JavaScript est la « implémentation » standard, par défaut et courante d'ES, en raison des droits des marques. Le problème est que le standard de langage formulé par l'European Computer Association ne peut pas s'appeler JS, mais seulement ES

Le but du nouveau standard ES6 est de permettre à JS d'être utilisé pour développer des applications Web à grande échelle et de devenir un langage de développement au niveau de l'entreprise. Le langage de développement au niveau de l'entreprise est : adapté au développement modulaire et doté d'une bonne gestion des dépendances 

Pourquoi devriez-vous apprendre ES6 ? A quoi sert ES6 ?

ES5 ne peut pas répondre à la situation actuelle où le front-end devient de plus en plus complexe et énorme. On peut dire qu'il est obsolète. ES6 est une amélioration et une mise à niveau vers ES5.

1. Les navigateurs grand public ont entièrement pris en charge ES6

2. Les nouveaux frameworks frontaux du secteur ont entièrement utilisé la syntaxe ES6

3. Les applets WeChat, l'uni-app, etc. sont tous basés sur la syntaxe ES6

4. En partant de l'emploi, des petites et moyennes entreprises, du full stack, une compétence de plus sur votre CV, et vous pourrez démarrer plus rapidement pendant la période d'essai.

Variables

• let
  Une seule variable let peut être déclarée dans une portée. Si une variable let est également déclarée dans la portée enfant, elle n'affectera pas la variable let dans la portée parent.
• var
  Plusieurs variables var peuvent être déclarées dans une seule portée. Si une variable var est également déclarée dans la portée enfant, elle affectera également la variable var dans la portée parent.
• const
  Constante, équivalente à final, ne peut pas être modifiée.
• global
  Les variables qui ne déclarent pas de type de variable sont par défaut des variables globales (attributs de fenêtre).

Orienté objet

• Principe
  Les fonctionnalités orientées objet de JavaScript sont basées sur des prototypes et des constructeurs, qui sont différents des fonctionnalités courantes basées sur les classes. JavaScript ne fournit pas de fonctionnalités d'héritage d'objet au niveau du langage, mais le fait via la copie de prototypes.
• Trois méthodes de création d'objets

  1. {pojo}（实例变量、实例方法、get、set） 
  2. function（实例变量、实例方法、prototype、apply、call） 
  3. class（实例变量、实例方法、prototype、extends、super）

prototype

Seules les fonctions et les classes ont des prototypes, ce qui signifie ajouter dynamiquement des variables d'instance et des méthodes d'instance et implémenter l'héritage.

Inherit

• call/apply
  Appliqué dans la relation d'héritage, ce mot-clé doit être utilisé lorsque la sous-classe passe des paramètres à la classe parent
• extends
  Utilisé dans la relation d'héritage, A extends B, alors A est la classe parent de B
• super
  Utilisez le mot-clé secondaire lors de l'appel de la méthode de la classe parent dans la sous-classe
• Méthode d'héritage ES5
  Ensuite, nous écrivons à la main un ensemble d'héritage combiné (chaîne prototype héritage (prototype hérité) + héritage de construction (propriétés héritées)). Cette méthode peut éviter les inconvénients de l'impossibilité d'implémenter l'héritage multiple dans l'héritage de la chaîne de prototypes, l'impossibilité de transmettre des paramètres au constructeur de la classe parent lors de la création d'une instance de sous-classe, et également d'éviter les inconvénients de l'impossibilité d'hériter des propriétés/méthodes du prototype dans le constructeur. héritage.

function Person(name,age){                                             /* 父类 */
    this.name = name || 'father';                            //实例变量
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //实例方法
};
function Son(name){                                                     /* 子类 */
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
    Person.apply(this,['name',18]);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //继承：原型链继承，父类的实例作为子类的原型，拷贝属性两次，不合理
Son.prototype = Person.prototype;                            //继承：原型链继承，父类的实例作为子类的原型

Person.prototype.publicParam="param1";                       //动态添加实例变量
Person.prototype.talk=function(){alert("talk");}            //动态添加实例方法

var son = new Son();                                         //实例化对象，调用构造函数(constructor)

• Méthode d'héritage ES6
  L'héritage ES6 crée une nouvelle façon d'écrire, très similaire à Java, Scala et d'autres langages. Par défaut, héritage combiné (héritage de chaîne de prototype (héritage de prototype) + héritage de constructeur (héritage). propriétés) est utilisé de manière.

class Point {
    constructor(x, y) {
        this.x = x;                                           //实例变量
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //实例变量
        this.w = w;
    }
}
var son = new Son(1,2);

fonctions fléchées

Les fonctions fléchées sont une syntaxe nouvellement ajoutée dans ES6. Elles sont très similaires à la syntaxe fonctionnelle lambda et scala de Java

• code

var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};

chaîne de modèle. ， Modèle chaînes, nouvel assemblage de syntaxe de la chaîne

Rreeee

• destructuration

reconstruction/déconstruction, grammaire interactive variable

var templateStr = () => {
    var str1 = "adsf\nsdfa";

    var template1 = `<ul><li>first</li> <li>second</li></ul>`;

    var x = 1;
    var y = 2;
    var template2 = `${x} + ${y} = ${x + y}`;

    var template3 = `${lettest4()}`;
    console.log(str1)
    console.log(template1)
    console.log(template2)
    console.log(template3)
}

arguments

• Paramètres réels, variables ajoutées dans ES6 directement lire les paramètres

code

var destructuring = () => {
    var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
    let [temp="replaceString"] = ["tempString"];
    let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: 'qc'},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
    let {type:tipType,min:minNumber}={type:'message',min:20};
    let {sin,cos,tan,log}=Math;

    var fun = function({x,y}={}){return [x,y];}
    fun({x:100,y:2});

    [a,b]=[b,a];                                        //交换

    var map = [1,2,3]
    var map=new Map();
    map.set("id","007");
    map.set("name","cursor");
    for(let [key,value] of map){}
    for(let [key] of map){}
    for(let [,value] of map){}

    var arr = [1,2,3,4]
    for(let val of arr){val}

}

【Recommandations associées :

Tutoriel vidéo javascript

,

Vidéo de programmation
• 】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!