Ketika itu penting untuk lulus props
ke super()
, dan mengapa?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
reactjs
ecmascript-6
Misha Moroshko
sumber
sumber
Jawaban:
Hanya ada satu alasan ketika salah satu kebutuhan untuk lulus
props
kesuper()
:Ketika Anda ingin mengakses
this.props
di konstruktor.Lewat:
Tidak lewat:
Perhatikan bahwa yang lewat atau tidak lulus
props
untuksuper
memiliki tidak berpengaruh pada penggunaan selanjutnya darithis.props
luarconstructor
. Artinyarender
,shouldComponentUpdate
, atau event handler selalu memiliki akses ke sana.Ini secara eksplisit dikatakan dalam satu jawaban Sophie Alpert untuk pertanyaan serupa.
Dokumentasinya — Status dan Siklus Hidup, Menambahkan Status Lokal ke Kelas, poin 2 — merekomendasikan:
Namun, tidak ada alasan yang diberikan. Kami dapat berspekulasi itu karena subkelas atau untuk kompatibilitas di masa mendatang.
(Terima kasih @MattBrowne untuk tautannya)
sumber
this.props
adalahundefined
kecuali diteruskan kesuper()
. Either way, itu tidak mempengaruhi kemudian render atau ketersediaanthis.props
dirender()
fungsi.super
, Anda memiliki referensi ke mereka di konstruktor.props
kesuper()
: facebook.github.io/react/docs/… . Saya tidak yakin mengapa, karena seperti yang Anda tunjukkanthis.props
dapat diakses dengan metode lain ... mungkin mereka merekomendasikan ini untuk kompatibilitas di masa depan jika versi React masa depan mungkin ingin melakukan sesuatu denganprops
konstruktor?props
untuksuper
saat, seperti yang Anda menunjukkan,props
parameter benar ada tersedia bagi kita untuk menggunakan dalam constructor , danthis.props
bekerja di tempat lain? Apakah ada manfaatnya menggunakanthis.props
lebih dari sekadarprops
? Apakah praktik yang buruk merusakprops
di dalam konstruktor? Saya pikir saya masih gagal untuk melihat kasus ketika Anda pernah harus lulusprops
untuksuper
, tapi aku berani bertaruh itu hanya ketidaktahuan saya, ha.super(props)
, Anda dapat memanggil metode yang digunakanthis.props
di dari konstruktor , sepertithis.doStuffUsingThisDotProps()
, tanpa harus meneruskan parameter alat peraga ke metode / fungsi tersebut. Saya baru saja menulis konstruktor melakukan ini, yang tampaknya akan mengharuskan saya untuk menggunakansuper(props)
pertama, sesuai dengan jawaban untuk pertanyaan ini.Dalam contoh ini, Anda memperluas
React.Component
kelas, dan sesuai spesifikasi ES2015, konstruktor kelas anak tidak dapat menggunakanthis
sampaisuper()
dipanggil; juga, konstruktor kelas ES2015 harus memanggilsuper()
jika mereka adalah subkelas.Sebaliknya:
Lebih detail sesuai jawaban stack overflow yang luar biasa ini
Anda dapat melihat contoh komponen yang dibuat dengan memperluas
React.Component
kelas yang tidak memanggilsuper()
tetapi Anda akan melihat ini tidak memilikiconstructor
, karenanya mengapa tidak perlu.Satu titik kebingungan yang saya lihat dari beberapa pengembang yang saya ajak bicara adalah bahwa komponen yang tidak memiliki
constructor
dan karena itu tidak menelepon kesuper()
mana pun, masihthis.props
ada dalamrender()
metode ini. Ingatlah bahwa aturan ini dan kebutuhan ini untuk membuatthis
ikatanconstructor
hanya berlaku untukconstructor
.sumber
super()
dansuper(props)
).Ketika Anda beralih
props
kesuper
, alat peraga ditugaskanthis
. Lihatlah skenario berikut:Bagaimana pun saat Anda melakukannya:
sumber
Sesuai kode sumber
Anda harus lulus
props
setiap kali Anda memiliki alat peraga dan Anda tidak memasukkannyathis.props
secara manual.sumber
super(props)
dan yang lainnya tidak. Namun konsumen mereka sama-sama memasang alat peraga. Apa bedanya?this.props = props
dansuper(props)
adalah hal yang sama?this.props
berasal dari 'luar' - terlepas dari apa yang dilakukan dalam konstruktor.Dan Abramov menulis artikel tentang topik ini:
Kenapa Kita Menulis super (alat peraga)?
Dan intinya adalah bahwa memiliki kebiasaan melewatinya untuk menghindari skenario ini sangat membantu, jujur, saya tidak melihat hal itu tidak mungkin terjadi:
sumber
super()
digunakan untuk memanggil konstruktor induk.super(props)
akan diteruskanprops
ke konstruktor induk.Dari contoh Anda,
super(props)
akan memanggilReact.Component
konstruktor yang lewatprops
sebagai argumen.Informasi lebih lanjut tentang
super
: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/supersumber
Ketika menerapkan
constructor()
fungsi di dalam komponen Bereaksi,super()
adalah persyaratan. Ingatlah bahwaMyComponent
komponen Anda memperluas atau meminjam fungsionalitas dariReact.Component
kelas dasar.Kelas dasar ini memiliki
constructor()
fungsi sendiri yang memiliki beberapa kode di dalamnya, untuk mengatur komponen Bereaksi kami untuk kami.Ketika kita mendefinisikan suatu
constructor()
fungsi di dalamMyComponent
kelas kita, kita pada dasarnya, menimpa atau mengganticonstructor()
fungsi yang ada di dalamReact.Component
kelas, tetapi kita masih perlu memastikan bahwa semua kode pengaturan di dalamconstructor()
fungsi ini masih dipanggil.Jadi untuk memastikan bahwa
React.Component
'sconstructor()
fungsi dipanggil, kita sebutsuper(props)
.super(props)
adalah referensi keconstructor()
fungsi orang tua , itu saja.Kita harus menambahkan
super(props)
setiap kali kita mendefinisikan suatuconstructor()
fungsi di dalam komponen berbasis kelas.Jika tidak, kita akan melihat kesalahan yang mengatakan bahwa kita harus menelepon
super(props)
.Seluruh alasan untuk mendefinisikan
constructor()
fungsi ini adalah untuk menginisialisasi objek negara kita.Jadi untuk menginisialisasi objek keadaan kita, di bawah panggilan super saya akan menulis:
Jadi kami telah mendefinisikan
constructor()
metode kami , menginisialisasi objek negara kami dengan membuat objek JavaScript, menetapkan properti atau pasangan kunci / nilai, menetapkan hasil untuk ituthis.state
. Sekarang tentu saja ini hanya contoh di sini jadi saya belum benar-benar menetapkan pasangan kunci / nilai ke objek keadaan, itu hanya objek kosong.sumber
Ini biola yang saya buat: jsfiddle.net . Ini menunjukkan bahwa alat peraga ditetapkan tidak secara default di konstruktor. Seperti yang saya mengerti mereka menggunakan metode ini
React.createElement
. Oleh karena itusuper(props)
harus disebut hanya ketika assings konstruktor manual superclass iniprops
untukthis.props
. Jika Anda hanya memperpanjangReact.Component
panggilansuper(props)
tidak akan melakukan apa pun dengan alat peraga. Mungkin ini akan diubah di React versi berikutnya.sumber
Di sini kita tidak akan mendapatkan ini di konstruktor sehingga akan kembali tidak terdefinisi, tetapi kita akan dapat mengambil ini di luar fungsi konstruktor
Jika kita menggunakan super (), maka kita dapat mengambil variabel "ini" di dalam konstruktor juga
Jadi saat kita menggunakan super (); kita akan dapat mengambil ini tetapi this.props tidak akan ditentukan dalam konstruktor. Tapi selain konstruktor, this.props tidak akan kembali tanpa terdefinisi.
Jika kita menggunakan super (alat peraga), maka kita dapat menggunakan nilai this.props di dalam konstruktor juga
Jawaban Sophie Alpert
sumber
Untuk bereaksi versi 16.6.3, kami menggunakan super (alat peraga) untuk menginisialisasi nama elemen negara : this.props.name
sumber