React: Pertanyaan tentang "props.children"

Dibuat pada 26 Mei 2018  ·  6Komentar  ·  Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?
Hanya pertanyaan

Beberapa pertanyaan tentang props.children

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 :

Kasus 1: SETIAP aspek dari struktur data 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.

Kasus 2: TIDAK ADA aspek dari struktur data 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.

Kasus 3: BEBERAPA aspek dari struktur data 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?

Dan pertanyaan terakhir namun tidak kalah pentingnya:

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.

Question

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.

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!

Semua 6 komentar

_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

Apakah halaman ini membantu?
0 / 5 - 0 peringkat