Apakah tindak balas dan es6

react ialah rangka kerja pembangunan JavaScript deklaratif, cekap dan fleksibel yang dilancarkan oleh Facebook untuk membina antara muka pengguna; ia menyediakan pengaturcara dengan model di mana sub-komponen tidak boleh menjejaskan komponen luar secara langsung Apabila data berubah Kemas kini yang cekap kepada dokumen HTML dan pemisahan bersih antara komponen dalam aplikasi satu halaman moden. es6 ialah standard versi JavaScript seterusnya Matlamatnya adalah untuk menjadikan bahasa JavaScript boleh digunakan untuk menulis aplikasi berskala besar yang kompleks dan menjadi bahasa pembangunan peringkat perusahaan.

Persekitaran pengendalian tutorial ini: sistem windows7, versi ECMAScript 6&&react18, komputer Dell G3.

Apa itu react

react.js ialah rangka kerja pembangunan JavaScript yang dilancarkan oleh Facebook untuk membina antara muka pengguna.

React ialah perpustakaan JavaScript deklaratif, cekap dan fleksibel untuk membina antara muka pengguna. React membolehkan anda menggabungkan coretan kod yang pendek dan bebas ke dalam antara muka UI yang kompleks. Coretan kod ini dipanggil "komponen".

Oleh kerana idea reka bentuk React sangat unik, ia merupakan inovasi revolusioner, mempunyai prestasi cemerlang, dan logik kodnya sangat mudah. Oleh itu, semakin ramai orang memberi perhatian dan menggunakannya, memikirkan bahawa ia mungkin alat arus perdana untuk pembangunan web pada masa hadapan.

React ialah pustaka JavaScript sumber terbuka yang menyediakan paparan HTML untuk data. Paparan tindak balas biasanya dipaparkan menggunakan komponen yang mengandungi komponen lain yang dinyatakan dalam teg HTML tersuai. React menyediakan pengaturcara dengan model di mana komponen kanak-kanak tidak boleh menjejaskan komponen luar secara langsung, kemas kini yang cekap pada dokumen HTML apabila data berubah dan pemisahan bersih antara komponen dalam aplikasi satu halaman moden.

Kelebihan React ialah:

• Lebih sesuai untuk aplikasi besar dan kebolehujian yang lebih baik

• Kedua-dua APP asli web dan mudah alih

• Ekosistem yang lebih besar, lebih banyak sokongan dan alatan berguna

• Lebih sesuai untuk projek sederhana dan besar

Apakah itu es6

Nama penuh es6 ialah ECMAScript6 (versi ke-6 ECMAScript), yang dilancarkan pada 2015 Standard bahasa JavaScript dikeluarkan secara rasmi pada Jun 2015 secara rasmi dipanggil ECMAScript 2015 (ES2015).

ECMAScript 6 pada asasnya telah menjadi standard industri Popularitinya jauh lebih pantas daripada ES5 Sebab utamanya ialah penyemak imbas moden menyokong ES6 dengan cepat, terutamanya pelayar Chrome dan Firefox, yang sudah menyokong Kebanyakan ciri ES6.

Selepas itu, Skrip ECMA mengeluarkan versi utama setiap tahun untuk menambah beberapa ciri penting, yang kami panggil ES6.

Fahami hubungan antara ES dan JS

ES = ECMAScript ialah 'standard' untuk bahasa skrip dinamik, JS = JavaScript ialah 'pelaksanaan' standard, lalai dan arus perdana ES Disebabkan isu hak tanda dagangan, standard bahasa yang dirumuskan oleh Persatuan Komputer Eropah tidak boleh dipanggil JS, tetapi hanya boleh dipanggil ES standard ES6 baharu ialah: JS boleh digunakan untuk membangunkan aplikasi web berskala besar dan menjadi bahasa pembangunan peringkat perusahaan. Bahasa pembangunan peringkat perusahaan adalah: sesuai untuk pembangunan modular dan mempunyai pengurusan pergantungan yang baik; Untuk apa ES6 digunakan?

1. Penyemak imbas arus perdana telah menyokong sepenuhnya ES6

biar

• var
  Berbilang pembolehubah var boleh diisytiharkan dalam satu skop Jika pembolehubah var turut diisytiharkan dalam skop anak, ia juga akan mempengaruhi pembolehubah var dalam skop induk.
• const
  Malar, bersamaan dengan muktamad, tidak boleh diubah suai.
• global
  Pembolehubah yang tidak mengisytiharkan jenis pembolehubah lalai kepada pembolehubah global (atribut tetingkap).
• 
  Berorientasikan objek

• Prinsip
  Ciri berorientasikan objek JavaScript adalah berdasarkan prototaip dan pembina, yang berbeza daripada yang biasa berdasarkan kelas. JavaScript tidak menyediakan ciri peringkat bahasa bagi warisan objek, tetapi melakukannya melalui penyalinan prototaip.
• Tiga cara untuk mencipta objek

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

prototaip

Hanya fungsi , kelas mempunyai prototaip, maksudnya ialah menambah pembolehubah contoh dan kaedah contoh secara dinamik dan melaksanakan pewarisan.

Diwarisi

• panggil/mohon
  Dalam hubungan pewarisan, subkelas terpakai pada induk Kata kunci ini harus digunakan apabila menghantar parameter dalam kelas
• lanjutkan
  Digunakan dalam perhubungan warisan, A melanjutkan B, kemudian A ialah kelas induk B
• super
  Gunakan kata kunci sekunder apabila memanggil kaedah kelas induk dalam subkelas
• Kaedah pewarisan ES5
  Seterusnya kita tulis tangan set warisan gabungan (warisan rantai prototaip (warisan prototaip) warisan pembina (sifat warisan)). Kaedah ini boleh mengelakkan keburukan kerana tidak dapat melaksanakan warisan berbilang dalam warisan rantai prototaip, tidak dapat menghantar parameter kepada pembina kelas induk apabila mencipta contoh subkelas, dan juga mengelakkan keburukan tidak dapat mewarisi sifat/kaedah prototaip dalam pembina harta pusaka.

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)

• Kaedah warisan ES6
  Warisan ES6 mencipta kaedah penulisan baharu, yang hampir sama dengan Java, Scala dan bahasa lain, dan menggunakan gabungan secara lalai Warisan (warisan rantaian prototaip (prototaip diwarisi) membina warisan (sifat diwarisi)) cara.

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

fungsi anak panah

Fungsi anak panah ialah sintaks yang baru ditambah dalam ES6, yang serupa dengan lambda dan scala Java . >

• Kod

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

memusnahkan

• Kod

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

argumen

• Kod

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}

}

[Cadangan berkaitan: tutorial video javascript, Video pengaturcaraan

Atas ialah kandungan terperinci Apakah tindak balas dan es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!