Maison > Article > interface Web > 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.
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
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
Orienté objet
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
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)
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
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
Rreeeereconstruction/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
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
,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!