Apakah perbezaan antara tiga kaedah mentakrifkan komponen dalam tindak balas?

Perbezaan: 1. Komponen stateless yang ditakrifkan secara fungsional tidak boleh mengakses kaedah kitaran hayat, manakala kaedah es5 dan es6 mentakrifkan komponen stateful dan boleh mengakses kaedah kitaran hayat 2. Fungsi ini dalam kaedah es5 Ia boleh terikat secara automatik, tetapi fungsi ini dalam kaedah es6 tidak boleh diikat secara automatik dan perlu diikat secara manual.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah perbezaan antara tiga kaedah mentakrifkan komponen tindak balas dalam tindak balas?

Selepas pelancaran React, terdapat tiga cara untuk mentakrifkan komponen tindak balas atas sebab yang berbeza, tetapi semuanya memimpin kepada matlamat yang sama; tiga kaedah khusus ialah:

• Komponen tanpa kewarganegaraan yang ditakrifkan secara fungsional

• Komponen takrifan cara asli ES5 React.createClass

• borang es6 memanjangkan Komponen yang ditakrifkan React.Component

1 Komponen berfungsi tanpa kewarganegaraan

Ia adalah untuk mencipta komponen paparan tulen. Ini Komponen ini hanya bertanggungjawab untuk memaparkan berdasarkan prop yang masuk, dan tidak melibatkan operasi keadaan

Komponen tidak akan dijadikan instantiated, prestasi pemaparan keseluruhan dipertingkatkan dan objek ini tidak boleh diakses dan kaedah kitaran hayat tidak boleh diakses

2 kaedah asli ES5 React.createClass // RFC

React.createClass akan mengikat sendiri kaedah fungsi, menghasilkan. overhed prestasi yang tidak perlu dan meningkatkan kemungkinan keusangan kod.

3. Borang warisan E6 React.Component // RCC

Cara yang sangat disyorkan untuk mencipta komponen stateful akhirnya akan menggantikan borang React.createClass; .createClass boleh mencapai penggunaan semula kod dengan lebih baik.

Perbezaan antara komponen stateless dan dua yang terakhir

Berbanding dengan komponen stateless, React.createClass dan React.Component adalah kedua-duanya Buat komponen stateful yang dibuat seketika dan mempunyai akses kepada kaedah kitaran hayat komponen.

Perbezaan antara React.createClass**** dan React.Component

Fungsi mengikat diri ini

Untuk komponen yang dicipta oleh React.createClass, fungsi setiap ahli ini diikat secara automatik oleh React, dan ini dalam fungsi akan ditetapkan dengan betul.

Untuk komponen yang dicipta oleh React.Component, fungsi ahli mereka tidak akan mengikat ini secara automatik dan pembangun perlu mengikatnya secara manual, jika tidak, ini tidak boleh mendapatkan objek contoh komponen semasa.

PropTypes jenis harta komponen dan propTypes lalai props lalaiProps mempunyai konfigurasi berbeza

React.createClass Apabila mencipta komponen, jenis sifat prop komponen dan lalai komponen Sifat akan dikonfigurasikan sebagai sifat contoh komponen, di mana defaultProps menggunakan kaedah getDefaultProps untuk mendapatkan sifat komponen lalai

Apabila React.Component mengkonfigurasi kedua-dua maklumat yang sepadan ini apabila mencipta komponen, ia adalah digunakan sebagai kelas komponen Sifat bukan sifat contoh komponen, iaitu sifat statik kelas yang dipanggil.

Konfigurasi keadaan awal komponen adalah berbeza

Keadaan komponen yang dicipta oleh React.createClass dikonfigurasikan melalui kaedah getInitialState; 🎜>

Keadaan komponen yang dicipta oleh React.Component diisytiharkan dalam pembina seperti memulakan sifat komponen.

Ringkasan Akhir

Apabila boleh, cuba gunakan penciptaan komponen tanpa kewarganegaraan.

Untuk komponen yang boleh dibuat dengan React.Component, cuba jangan buat komponen dalam bentuk React.createClass untuk meningkatkan kebolehgunaan semula dan meningkatkan prestasi.

Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah perbezaan antara tiga kaedah mentakrifkan komponen dalam tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!