React と es6 とは何ですか

react は、ユーザー インターフェイスを構築するために Facebook によって発表された、宣言的で効率的かつ柔軟な JavaScript 開発フレームワークであり、サブコンポーネントが外部コンポーネントに直接影響を与えないモデルをプログラマーに提供します。最新の単一ページ アプリケーションにおけるコンポーネント間の明確な分離。 es6 は JavaScript の次期バージョン標準であり、その目標は、JavaScript 言語を複雑な大規模アプリケーションの作成に使用できるようにし、エンタープライズ レベルの開発言語にすることです。

このチュートリアルの動作環境: Windows7 システム、ECMAScript 6&&react18 バージョン、Dell G3 コンピューター。

react とは

---

react.js は、Facebook がユーザー インターフェイスを構築するために立ち上げた JavaScript 開発フレームワークです。

React は、ユーザー インターフェイスを構築するための宣言的で効率的かつ柔軟な JavaScript ライブラリです。 React を使用すると、短い独立したコード スニペットを組み合わせて複雑な UI インターフェイスを作成できます。これらのコード スニペットは「コンポーネント」と呼ばれます。

React の設計思想は非常にユニークであるため、革命的なイノベーションであり、優れたパフォーマンスを備えており、コード ロジックは非常にシンプルです。そのため、将来の Web 開発の主流のツールになるのではないかと考え、注目し、使用する人が増えています。

#React は、HTML にレンダリングされたデータのビューを提供するオープン ソースの JavaScript ライブラリです。 React ビューは通常、カスタム HTML タグで指定された他のコンポーネントを含むコンポーネントを使用してレンダリングされます。 React は、子コンポーネントが外部コンポーネントに直接影響を与えないモデル、データ変更時の HTML ドキュメントの効率的な更新、最新のシングルページ アプリケーションにおけるコンポーネント間の明確な分離をプログラマーに提供します。

React の利点は次のとおりです:

• 大規模なアプリケーションにより適しており、テスト容易性が優れています

• Web とモバイル ネイティブ APP がすべてを引き受けます

• 大規模なエコシステム、より多くのサポート、使いやすいツール

• 中規模および大規模企業に適していますプロジェクト

es6 とは

---

es6 の正式名は ECMAScript6 (ECMAScript の 6 番目のバージョン) で、2015 年にリリースされました。 2015 年 6 月に正式にリリースされた JavaScript 言語標準は、正式には ECMAScript 2015 (ES2015) と呼ばれます。

ECMAScript 6 は基本的に業界標準になっており、その人気は ES5 よりもはるかに速いです。主な理由は、最新のブラウザ、特に Chrome ブラウザと Firefox ブラウザがすでにほとんどの機能をサポートしているため、非常に早く ES6 をサポートしているためです。 ES6では。

それ以来、ECMA Script は重要な機能を追加するメジャー バージョン (ES6 と呼ばれます) を毎年リリースしてきました。

ES と JS の関係を理解する

ES = ECMAScript は動的スクリプト言語の「標準」、JS = JavaScript ES の標準、デフォルト、および主流の「実装」です。商標権の問題により、欧州コンピュータ協会によって策定された言語標準は JS と呼ぶことはできず、ES とのみ呼ぶことができます。

の目的新しい ES6 標準は次のとおりです。JS は大規模な Web アプリケーションの開発に使用でき、エンタープライズ レベルの開発言語になります。エンタープライズ レベルの開発言語は、モジュール開発に適しており、依存関係の管理が優れています。

ES6 を学ぶ必要がある理由は何ですか? ES6 は何に使用されますか?

ES5 は、フロントエンドが複雑化、巨大化する現状に対応できず、時代遅れとも言えますが、ES6 は ES5 を強化し、アップグレードしたものです。

1. 主流のブラウザは ES6 を完全にサポートしています

2. 業界の新しいフロントエンド フレームワークは ES6 構文を完全に使用しています

3. WeChat アプレット、ユニアプリ、 etc are all based on ES6 syntax

4. 採用から始めて、中小企業、フルスタック、履歴書にもう 1 つのスキル、試用期間も早く始めることができます。

変数

• let
  スコープ内で宣言できる let 変数は 1 つだけです。子 let 変数がスコープ内でも宣言されている場合、親スコープ内の let 変数には影響しません。
• var
  1 つのスコープ内で複数の var 変数を宣言できます。子スコープでも var 変数を宣言すると、親スコープの var 変数にも影響します。
• const
  定数 (final と同等) は変更できません。
• global
  変数の型を宣言していない変数は、デフォルトでグローバル変数 (ウィンドウ属性) になります。

#オブジェクト指向

• 原則
  JavaScript のオブジェクト指向機能はプロトタイプとコンストラクターに基づいており、クラスに基づく一般的な機能とは異なります。 JavaScript はオブジェクト継承の言語レベルの機能を提供しませんが、プロトタイプのコピーを通じて提供します。
• オブジェクトを作成する 3 つの方法

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

プロトタイプ

関数とクラスのみプロトタイプのみが存在し、その意義はインスタンス変数やインスタンスメソッドを動的に追加し、継承を実装することにあります。

#継承

##call/apply
• 継承関係では、サブクラスが親に適用されます。このキーワードは、クラス
  #extends
• でパラメータを渡すときに使用する必要があります。継承関係で使用されます。A は B を拡張し、A は B# の親クラスになります。 ##super
  
サブクラスで親クラスを呼び出すメソッドはキーワードを使用します。
• ## ES5 継承メソッド
  
# Next (プロトタイプ継承) コンストラクター継承 (継承されたプロパティ))。この方法により、プロトタイプチェーン継承で多重継承が実装できない、サブクラスのインスタンス作成時に親クラスのコンストラクターにパラメータを渡せない、コンストラクターでプロトタイプのプロパティ/メソッドを継承できないというデメリットを回避できます。継承。

• 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 継承メソッド

ES6 継承は、Java、Scala、その他の言語に非常によく似た新しい記述方法を作成し、結合された継承を使用します。デフォルトでは (プロトタイプチェーンの継承 (プロトタイプの継承) コンストラクトの継承 (プロパティの継承))。

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

  
  
アロー関数

アロー関数は ES6 で追加された新しい構文で、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};

• #template string

テンプレート文字列、文字列連結の新しい構文コード

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

• 構造解除

# 再構築/分解、変数相互作用の構文

コード

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}

}

• 引数

実際のパラメータ、パラメータを直接読み取るために ES6 に追加された変数

##コード

function argumentsTest(a,b) { 
	for(let val of arguments)
		{console.log(val)
	}
}

[関連する推奨事項 :

JavaScript ビデオ チュートリアル

、
• プログラミング ビデオ ]

以上がReact と es6 とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。