Was sind React und Es6?

react ist ein von Facebook eingeführtes deklaratives, effizientes und flexibles JavaScript-Entwicklungsframework zum Erstellen von Benutzeroberflächen. Es bietet Programmierern ein Modell, bei dem sich Unterkomponenten nicht direkt auf äußere Komponenten auswirken können. Das HTML-Dokument wird effizient aktualisiert und bereinigt Trennung zwischen Komponenten in modernen Single-Page-Anwendungen. es6 ist der nächste Versionsstandard von JavaScript. Ziel ist es, die JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu nutzen und zu einer Entwicklungssprache auf Unternehmensebene zu machen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, ECMAScript 6&&react18-Version, Dell G3-Computer.

Was ist React? React.js ist ein von Facebook gestartetes JavaScript-Entwicklungsframework zum Erstellen von Benutzeroberflächen.

---

React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Mit React können Sie kurze, unabhängige Codefragmente zu komplexen UI-Schnittstellen kombinieren. Diese Codefragmente werden „Komponenten“ genannt.

Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher beginnen immer mehr Menschen, darauf zu achten und es zu nutzen, weil sie glauben, dass es in Zukunft das Mainstream-Tool für die Webentwicklung sein könnte.

React ist eine Open-Source-JavaScript-Bibliothek, die HTML-Ansichten für Daten bereitstellt. React-Ansichten werden normalerweise mithilfe von Komponenten gerendert, die andere in benutzerdefinierten HTML-Tags angegebene Komponenten enthalten. React bietet Programmierern ein Modell, bei dem untergeordnete Komponenten keinen direkten Einfluss auf äußere Komponenten haben, effiziente Aktualisierungen von HTML-Dokumenten bei Datenänderungen und eine saubere Trennung zwischen Komponenten in modernen Single-Page-Anwendungen.

Die Vorteile von React sind:

Besser für groß angelegte Anwendungen geeignet und bessere Testbarkeit

• Sowohl Web- als auch mobile native APPs

• Ein größeres Ökosystem, unterstützender und benutzerfreundlicher Werkzeuge

• Eher geeignet für mittlere und große Projekte

• Was ist es6

es6 steht für ECMAScript6 (die 6. Version von ECMAScript), einer im Juni 2015 offiziell veröffentlichten JavaScript-Sprache, die offiziell als Standard bezeichnet wird ECMAScript 2015 (ES2015).

---

ECMAScript 6 hat sich im Grunde viel schneller als ES5 durchgesetzt. Der Hauptgrund dafür ist, dass moderne Browser ES6 sehr schnell unterstützen, insbesondere Chrome- und Firefox-Browser, die bereits die überwiegende Mehrheit der ES6-Funktionen unterstützen.

Seitdem hat ECMA Script jedes Jahr eine Hauptversion veröffentlicht, die einige wichtige neue Funktionen hinzufügt, die wir ES6+ nennen.

Verstehen Sie die Beziehung zwischen ES und JS.

ES = ECMAScript ist der „Standard“ für eine dynamische Skriptsprache, JS = JavaScript ist aufgrund von Markenrechten die standardmäßige, gängige „Implementierung“ von ES Das Problem besteht darin, dass der von der European Computer Association formulierte Sprachstandard nicht als JS, sondern nur als ES bezeichnet werden kann. Der Zweck des neuen ES6-Standards besteht darin, die Verwendung von JS für die Entwicklung umfangreicher Webanwendungen zu ermöglichen eine Entwicklungssprache auf Unternehmensebene. Die Entwicklungssprache auf Unternehmensebene ist für die modulare Entwicklung geeignet und verfügt über ein gutes Abhängigkeitsmanagement.

Warum sollten Sie ES6 lernen? Wofür wird ES6 verwendet?

ES5 kann der aktuellen Situation, in der das Frontend immer komplexer und umfangreicher wird, nicht gerecht werden. Man kann sagen, dass ES6 eine Verbesserung und ein Upgrade auf ES5 ist.

1. Mainstream-Browser unterstützen vollständig ES6-Syntax3. WeChat-Applets, Uni-App usw. basieren alle auf ES6-Syntax

4. Ausgehend vom Arbeitsverhältnis, kleine und mittlere Unternehmen, Full Stack, eine weitere Fähigkeit im Lebenslauf und schon können Sie in der Probezeit schneller durchstarten.

Variablen

let In einem Bereich kann nur eine Let-Variable deklariert werden. Wenn eine Let-Variable auch im untergeordneten Bereich deklariert wird, hat dies keine Auswirkungen auf die Let-Variable im übergeordneten Bereich.

var

• Mehrere var-Variablen können in einem Bereich deklariert werden. Wenn eine var-Variable auch im untergeordneten Bereich deklariert wird, wirkt sich dies auch auf die var-Variable im übergeordneten Bereich aus.
  const
• Konstante, äquivalent zu final, kann nicht geändert werden.
  global
• Variablen, die keinen Variablentyp deklarieren, verwenden standardmäßig globale Variablen (Fensterattribute).
  
• Objektorientiert
  
  • Prinzip
    Die objektorientierten Funktionen von JavaScript basieren auf Prototypen und Konstruktoren, die sich von den üblichen, auf Klassen basierenden unterscheiden. JavaScript stellt keine Funktionen der Objektvererbung auf Sprachebene bereit, sondern tut dies durch das Kopieren von Prototypen.
  • Drei Methoden zum Erstellen von Objekten

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

  Prototyp

  Nur Funktionen und Klassen haben Prototypen, was bedeutet, dass Instanzvariablen und Instanzmethoden dynamisch hinzugefügt und Vererbung implementiert werden.

  Inherit

  • call/apply
    Dieses Schlüsselwort wird in der Vererbungsbeziehung angewendet und sollte verwendet werden, wenn die Unterklasse Parameter an die übergeordnete Klasse übergibt.
  • extends
    In der Vererbungsbeziehung wird A erweitert B, dann ist A die übergeordnete Klasse von B
  • super
    Verwenden Sie das sekundäre Schlüsselwort, wenn Sie die Methode der übergeordneten Klasse in der Unterklasse aufrufen Vererbung (geerbter Prototyp) + Konstruktvererbung (geerbte Eigenschaften)). Mit dieser Methode können die Nachteile vermieden werden, dass bei der Vererbung der Prototypenkette keine Mehrfachvererbung implementiert werden kann, beim Erstellen einer Unterklasseninstanz keine Parameter an den Konstruktor der übergeordneten Klasse übergeben werden können und auch die Nachteile vermieden werden können, dass Prototypeigenschaften/-methoden im Konstruktor nicht erben können Nachlass.

  • 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)

    
    ES6-Vererbungsmethode
  Die ES6-Vererbung erstellt eine neue Schreibweise, die Java, Scala und anderen Sprachen sehr ähnlich ist. Standardmäßig kombinierte Vererbung (Prototypkettenvererbung (Prototypvererbung) + Konstruktorvererbung (Vererbung). Eigenschaften) wird ) Art und Weise verwendet.

  • 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);

    
    Pfeilfunktionen

  Pfeilfunktionen sind eine neu hinzugefügte Syntax in ES6. Sie sind der Funktionssyntax von Java Lambda und Scala sehr ähnlich ， Vorlage Strings, neues Syntax-Stitching des Strings

  Rreeee

  • Destructulaing
  Rekonstruktion/Dekonstruktion, variable interaktive Grammatik

  Argumente Tatsächliche Parameter, in ES6 hinzugefügte Variablen zum direkten Lesen. Parameter

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

  【Verwandte Empfehlungen:
  Javascript-Video-Tutorial

  , Programmiervideo】

Das obige ist der detaillierte Inhalt vonWas sind React und Es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!