Apakah Anda ingin meminta fitur atau melaporkan bug ?
Hanya pertanyaan
Dalam dokumentasi resmi React dari React.Children, Anda dapat membaca bahwa this.props.children
adalah "struktur data buram".
Apa artinya PERSIS?
Saya pikir secara umum ada tiga kemungkinan untuk transparansi struktur data props.children
:
props.children
terbuka dan terdefinisi dengan baik.Jika ini benar maka istilah "struktur data buram" akan sepenuhnya salah.
Oleh karena itu, "Kasus 1" jelas bukan masalahnya.
props.children
yang terbuka atau jelas.Itu berarti bahwa setiap kali Anda menggunakan props.children
Anda SELALU HARUS menggunakannya dalam kombinasi dengan React.Children
karena React.Children
adalah satu-satunya (mmmh, apakah itu benar-benar satu-satunya?) siapa yang tahu tentang struktur data sebenarnya dari props.children
.
Tapi itu menyiratkan bahwa itu tidak boleh digunakan
javascript
// This is used almost everywhere (even in the official React documentation)
<div>{this.props.children}</div>
maupun
javascript
// This is often seen with the "Function as child" pattern
MyComponent.propTypes = {
children: PropTypes.func.isRequired,
};
Karena kedua contoh tersebut sangat umum, tampaknya "Kasus 2" jelas juga bukan masalahnya.
props.children
terbuka dan terdefinisi dengan baik.Itu akan membuka kemungkinan bahwa satu atau bahkan kedua contoh dalam "Kasus 2" adalah valid.
Tapi itu berarti bahwa harus ada spesifikasi yang tepat aspek apa dari props.children
yang didefinisikan dengan baik dan terbuka dan aspek mana yang benar-benar buram.
Mungkin saya melewatkan sesuatu di dokumentasi React, tapi saya pikir itu tidak benar-benar ditentukan di sana, bukan?
Mengapa tepatnya bukan props.children
jika ada beberapa anak (satu ore lebih) selalu berupa array (seperti yang dilakukan di "Preact" misalnya)? Itu akan membuat segalanya jauh lebih mudah, bukan?
Terima kasih banyak sebelumnya atas klarifikasi.
_Opaque data structure_ mengacu pada fakta bahwa children
bisa banyak hal: Array, fragmen, elemen tunggal, string literal, dll.
_React.Children_ berisi beberapa metode yang memungkinkan Anda untuk bekerja dengan berbagai jenis children
_dengan cara yang terpadu_, dan jelas bukan satu-satunya cara untuk berinteraksi dengan mereka.
Mengapa tepatnya bukan props.children jika ada beberapa anak (satu ore lebih) selalu berupa array (seperti yang dilakukan di "Preact" misalnya)?
Selain fakta bahwa ia memiliki singkatan di BEJ, children
adalah properti seperti properti lainnya. Sebenarnya, Anda dapat menentukannya sebagai:
<Component children={...}/>
Ketika React perlu memperbarui DOM, akan jauh lebih mahal untuk mengetahui apakah dua larik item tunggal sama daripada apakah dua nilai primitif (misalnya string) sama.
Karena itu, saya pikir dokumentasi React.Children mungkin sedikit diperluas, tetapi itu adalah masalah untuk masuk ke repositori reactjs / reactjs.org .
Artikel ini mungkin sedikit menjelaskan banyak hal, itu berhasil untuk saya!
Terima kasih banyak @danburzo atas jawaban dan klarifikasi Anda.
Setelah jawaban Anda, jelas bahwa saya benar-benar salah memahami kata "buram" di sana.
Dokumentasi React hanya ingin mengatakan bahwa struktur data props.children
adalah tipe union yang terdefinisi dengan baik dan bervariasi dalam representasi konkritnya (seperti yang selalu dilakukan tipe union).
Saya baru saja menemukan masalah lama yang membahas topik yang persis sama - bertanya-tanya apa yang terjadi dengan perubahan itu?!? (Saya telah membuka masalah di reactjs.org => reactjs / reactjs.org # 914):
https://github.com/facebook/react/pull/6018/files/91223423410f107ff83a8a6ce3158c488247292f?short_path=ef51787#diff -ef51787305cfed62f6f564284762d4de
Namun demikian saya tetap ingin menanyakan pertanyaan kedua lagi:
Mengapa "props.children" BUKAN sebuah array jika hanya ada SATU anak (tampaknya merupakan pelanggaran terhadap prinsip yang paling tidak mengherankan jika Anda tidak mengetahui background => jika namanya adalah "children" atau "items" atau "token" Anda biasanya mengharapkan koleksi)?
Apakah ini benar-benar karena alasan kinerja? Saya tidak dapat benar-benar melihat bahwa penghitungan "checkResult" di bawah memakan waktu itu:
const
child1 = ...,
child2 = ...,
child1IsArray = Array.isArray(child1),
child2IsArray = Array.isArray(child2),
checkResult = child1IsArray && child2IsArray
&& child1.length === 1 && child2.length === 1
&& child1[0] === child2[0];
Maaf jika bertanya lagi tampaknya agak menjengkelkan - tetapi saya sangat ingin mengetahui alasan pasti untuk keputusan desain itu ....
Saya senang bisa membantu Anda dengan bagian pertama pertanyaan Anda! Sayangnya, mengapa anak tunggal tidak direpresentasikan sebagai larik item tunggal, saya tidak memiliki jawaban _exact_. Namun, saya mencoba menunjukkan bahwa Anda masih dapat secara valid memberikan satu anak sebagai prop normal (daripada singkatan JSX), sebuah fakta yang secara tidak sengaja saya mengaburkan hipotesis saya bahwa ini terkait dengan kinerja.
@danburzo Terima kasih sekali lagi atas jawaban Anda.
Mmh, terus terang saya berharap mungkin seseorang dari tim React akan mengingat alasan sebenarnya dari keputusan desain itu ...
Karena memang ada beberapa masalah halus dengan penanganan prop anak-anak di React.
Misalnya, tanyakan pada pemula React apakah komponen Test1 dan Test2 dalam contoh berikut berperilaku sama (Anda - sebagai pro React - tahu bahwa jawabannya adalah "tidak" => Test2 akan memperingatkan di DEV tentang kunci yang hilang sementara Test1 akan tidak - tetapi apakah ini benar-benar yang Anda harapkan jika Anda seorang pemula?!?)
const
h = React.createElement,
Test1 = () => h('div', null, h('br'), h('br')),
Test2 = () => h('div', { children: [h('br'), h('br')] });
ReactDOM.render(
h('div', null, h(Test1), h(Test2)),
document.getElementById('container')
);
Ngomong-ngomong: Jika Test2 diizinkan, ini akan memiliki beberapa manfaat kinerja halus jika Anda menerapkan beberapa penggantian createElement
- seperti beberapa fungsi hiperskrip misalnya.
Contoh lain: Ask a React newbie akan seperti apa tampilan "children: PropTypes ...." jika persyaratannya adalah bahwa semua anak harus memenuhi kondisi tertentu. Saya pikir itu tidak akan mudah untuk dijawab (setidaknya untuk pemula).
Kepada tim React: Jika alasan keputusan desain yang dimaksud tidak benar-benar diketahui atau mungkin hanya masalah selera, maka silakan tutup masalah ini.
Saya berasumsi bahwa keputusan untuk tidak menggunakan array untuk satu anak dibuat untuk menghindari alokasi array yang tidak perlu.
Karena memang ada beberapa masalah halus dengan penanganan prop anak-anak di React.
Kami biasanya tidak merekomendasikan penggunaan children
prop eksplisit. Sebagian besar pengguna juga menggunakan JSX alih-alih langsung menelepon React.createElement
, jadi masalah yang Anda sebutkan biasanya bukan masalah.
@aweary Terima kasih atas jawaban Anda
Komentar yang paling membantu
_Opaque data structure_ mengacu pada fakta bahwa
children
bisa banyak hal: Array, fragmen, elemen tunggal, string literal, dll._React.Children_ berisi beberapa metode yang memungkinkan Anda untuk bekerja dengan berbagai jenis
children
_dengan cara yang terpadu_, dan jelas bukan satu-satunya cara untuk berinteraksi dengan mereka.Selain fakta bahwa ia memiliki singkatan di BEJ,
children
adalah properti seperti properti lainnya. Sebenarnya, Anda dapat menentukannya sebagai:Ketika React perlu memperbarui DOM, akan jauh lebih mahal untuk mengetahui apakah dua larik item tunggal sama daripada apakah dua nilai primitif (misalnya string) sama.
Karena itu, saya pikir dokumentasi React.Children mungkin sedikit diperluas, tetapi itu adalah masalah untuk masuk ke repositori reactjs / reactjs.org .
Artikel ini mungkin sedikit menjelaskan banyak hal, itu berhasil untuk saya!