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.
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!