react是Facebook推出的聲明式，高效且靈活的用於建立使用者介面的JavaScript開發框架；它為程式設計師提供了一個子元件不能直接影響外層元件的模型，當資料改變時對HTML文件的有效更新，和現代單頁應用程式中元件之間乾淨的分離。 es6是JavaScript的下一個版本標準，它的目標是使得JavaScript語言可以用來編寫複雜的大型應用程序，成為企業級開發語言。
本教學操作環境：windows7系統、ECMAScript 6&&react18版、Dell G3電腦。
react.js是 Facebook 推出的一個用來建立使用者介面的 JavaScript 開發框架。
React 是一個聲明式，高效且靈活的用於建立使用者介面的 JavaScript 函式庫。使用 React 可以將一些簡短、獨立的程式碼片段組合成複雜的 UI 介面，這些程式碼片段被稱為「元件」。
由於 React的設計想法極為獨特，屬於革命性創新，但性能出眾，程式碼邏輯卻非常簡單。所以，越來越多人開始關注和使用，認為它可能是未來的 Web 開發的主流工具。
React 是一個為資料提供渲染為 HTML 視圖的開源 JavaScript 函式庫。 React 視圖通常採用包含以自訂 HTML 標記規定的其他元件的元件渲染。 React 為程式設計師提供了一個子元件不能直接影響外層元件的模型，資料改變時對 HTML 文件的有效更新，和現代單頁應用程式中元件之間乾淨的分離。
React的優點是：
更適合大型應用和更好的可測試性
Web端和行動裝置原生APP通吃
更大的生態系統，更多的支援與好用的工具
比較適合中大型專案
es6全名為ECMAScript6（ECMAScript的第6版），2015年6月正式發表的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。
ECMAScript 6 目前基本上成為業界標準，它的普及速度比ES5 要快很多，主要原因是現代瀏覽器對ES6 的支援相當迅速，尤其是Chrome 和Firefox 瀏覽器，已經支援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.微信小程序,uni-app等都是基於ES6的語法
4.從就業出發，中小型公司，全棧，簡歷上多一個技能，試用期也能更快的上手。
變數
物件導向
#
1. {pojo}（实例变量、实例方法、get、set）
2. function（实例变量、实例方法、prototype、apply、call）
3. class（实例变量、实例方法、prototype、extends、super）#prototype
只有函數、class才有原型，意義在於動態加入實例變數和實例方法及實作繼承。
繼承
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);arrow functions
# 箭頭函數，是ES6中新加入的語法，於Java的lambda，scala的函數式文法非常相似
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)
}destructuring
重構/解構，變數互動的語法
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}
}#arguments
#arguments
function argumentsTest(a,b) {
for(let val of arguments)
{console.log(val)
}
}以上是react和es6是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
