React: أسئلة بخصوص "props.children"

تم إنشاؤها على ٢٦ مايو ٢٠١٨ · 6تعليقات · مصدر: facebook/react

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
مجرد أسئلة

بعض الأسئلة المتعلقة بالدعائم

في وثائق React الرسمية لـ this.props.children عبارة عن "بنية بيانات غير شفافة".
ماذا يعني ذلك بالضبط؟

أعتقد أن هناك ثلاثة احتمالات عامة لشفافية هيكل البيانات props.children :

الحالة 1: كل جانب من جوانب هيكل البيانات `props.children` مفتوح ومعرف جيدًا.

إذا كان هذا صحيحًا ، فسيكون مصطلح "بنية البيانات غير الشفافة" خاطئًا تمامًا.
لذلك من الواضح أن "القضية 1" ليست كذلك.

الحالة 2: لا يوجد جانب من جوانب هيكل البيانات `props.children` مفتوحًا أو واضحًا.

هذا يعني أنه كلما استخدمت props.children عليك دائمًا استخدامه مع React.Children لأن React.Children هو الوحيد (mmmh ، هل هو حقًا الوحيد؟) من يعرف بنية البيانات الفعلية البالغة props.children .

لكن هذا يعني أنه لا ينبغي السماح باستخدامه

javascript // This is used almost everywhere (even in the official React documentation) <div>{this.props.children}</div>

ولا

javascript // This is often seen with the "Function as child" pattern MyComponent.propTypes = { children: PropTypes.func.isRequired, };

نظرًا لأن كلا المثالين شائعان جدًا ، يبدو أن "الحالة 2" ليست كذلك بالطبع.

الحالة 3: بعض جوانب هيكل البيانات `props.children` مفتوحة ومحددة جيدًا.

من شأن ذلك أن يفتح إمكانية أن يكون أحد الأمثلة أو كلاهما في "الحالة 2" صالحًا.
ولكن بعد ذلك يعني أنه يجب أن يكون هناك مواصفات دقيقة ما هي جوانب props.children تم تعريفها بشكل جيد ومفتوح وأي الجوانب غير شفافة حقًا.
ربما فاتني شيء ما في وثائق React ، لكنني أعتقد أنه غير محدد بالضبط هناك ، أليس كذلك؟

وأخيرًا وليس آخرًا ، سؤال آخر:

لماذا بالضبط لا يكون props.children في حالة وجود بعض الأطفال (واحد أو أكثر) مجرد مصفوفة دائمًا (كما هو الحال في "Preact" على سبيل المثال)؟ هذا من شأنه أن يجعل الأمور أسهل بكثير ، أليس كذلك؟

شكرا جزيلا مقدما على التوضيحات.

Question

مصدر

mcjazzyfunky

التعليق الأكثر فائدة

_تكوين بيانات غير شفاف _ يشير إلى حقيقة أن children يمكن أن يحتوي على الكثير من الأشياء: المصفوفات ، الأجزاء ، العناصر الفردية ، السلاسل الحرفية ، إلخ.

_React.Children_ يحتوي على عدد قليل من الطرق التي تسمح لك بالعمل مع أنواع مختلفة من children _ بطريقة موحدة_ ، وهي بالتأكيد ليست الطريقة الوحيدة للتفاعل معهم.

لماذا بالضبط ليست props.children في حالة وجود بعض الأطفال (واحد خام أكثر) فقط دائمًا مصفوفة (كما هو الحال في "Preact" على سبيل المثال)؟

بخلاف حقيقة أنه يحتوي على اختصار في JSX ، فإن children هو خاصية مثل أي خاصية أخرى. في الواقع ، يمكنك تحديده على النحو التالي:

<Component children={...}/>

عندما تحتاج React إلى تحديث DOM ، سيكون من الأكثر تكلفة معرفة ما إذا كانت مصفوفتان من عنصر واحد متماثلتين مقارنة بما إذا كانت قيمتان بدائيتان (مثل السلاسل) متماثلتين.

ومع ذلك ، أعتقد أن توثيق React.Children قد يتم توسيعه قليلاً ، ولكن هذه مشكلة في تسجيل الدخول إلى مستودع رد فعل / رد فعل .

قد توضح هذه المقالة الأشياء قليلاً ، لقد فعلت ذلك بالنسبة لي!

danburzo في ٢٨ مايو ٢٠١٨

👍4

ال 6 كومينتر

لماذا بالضبط ليست props.children في حالة وجود بعض الأطفال (واحد خام أكثر) فقط دائمًا مصفوفة (كما هو الحال في "Preact" على سبيل المثال)؟

<Component children={...}/>

قد توضح هذه المقالة الأشياء قليلاً ، لقد فعلت ذلك بالنسبة لي!

danburzo في ٢٨ مايو ٢٠١٨

👍4

شكرًا جزيلاً @ danburzo على إجاباتك وتوضيحاتك.
بعد إجابتك ، من الواضح أنني أخطأت تمامًا في فهم كلمة "مبهمة" هناك.
أرادت وثائق React فقط أن تقول أن بنية البيانات props.children هي نوع اتحاد محدد جيدًا ، وأنه يختلف في تمثيله الملموس (كما تفعل أنواع الاتحاد دائمًا).

لقد وجدت للتو مشكلة قديمة تناولت نفس الموضوع بالضبط - أتساءل ماذا حدث لتلك التغييرات؟!؟ (لقد فتحت مشكلة في رد فعل على رد فعل / رد فعل. org # 914):

https://github.com/facebook/react/pull/6018/files/91223423410f107ff83a8a6ce3158c488247292f؟short_path=ef51787#diff -ef51787305cfed62f6f564284762d4de

ومع ذلك ، ما زلت أرغب في طرح السؤال الثاني مرة أخرى:
لماذا لا تعتبر "props.children" مصفوفة في حالة وجود طفل واحد بالضبط (يبدو حقًا انتهاكًا لمبدأ أقل قدر من الدهشة إذا كنت لا تعرف الخلفية => إذا كان الاسم "أطفال" أو "عناصر" أو "الرموز" التي تتوقعها عادةً من مجموعة)؟
هل هو حقا لأسباب تتعلق بالأداء؟ لا أستطيع أن أرى حقًا أن حساب "checkResult" أدناه يستغرق وقتًا طويلاً:

const
  child1 = ...,
  child2 = ...,
  child1IsArray = Array.isArray(child1),
  child2IsArray = Array.isArray(child2),

  checkResult = child1IsArray && child2IsArray
     && child1.length === 1 && child2.length === 1
     && child1[0] === child2[0];

آسف إذا كان السؤال مرة أخرى يبدو مزعجًا بعض الشيء - لكني أرغب حقًا في معرفة السبب الدقيق لقرار التصميم هذا ...

mcjazzyfunky في ٢٨ مايو ٢٠١٨

👍1

يسعدني أن أتمكن من مساعدتك في الجزء الأول من سؤالك! لسوء الحظ ، بالنسبة لسبب عدم تمثيل الأطفال الفرديين كمصفوفة من عنصر واحد ، ليس لدي إجابة _exact_. ومع ذلك ، كنت أحاول أن أشير إلى أنه لا يزال بإمكانك تمرير طفل واحد بشكل صحيح كعنصر عادي (بدلاً من اختصار JSX) ، وهي حقيقة أخفيت عن طريق الخطأ مع فرضيتي بأنها مرتبطة بالأداء.

danburzo في ٢٩ مايو ٢٠١٨

@ danburzo شكرا مرة أخرى على إجابتك.

حسنًا ، بصراحة كنت آمل أن يتذكر شخص من فريق React السبب الحقيقي وراء قرار التصميم هذا ...
نظرًا لوجود بعض المشكلات الدقيقة في التعامل مع دعائم الأطفال في React.
على سبيل المثال ، اسأل مبتدئًا في React عما إذا كان المكونان Test1 و Test2 في المثال التالي يتصرفان بنفس الطريقة (أنت - بصفتك React pro - تعرف أن الإجابة هي "no" => Test2 سيحذر DEV من المفاتيح المفقودة بينما Test1 سوف لا - ولكن هل هذا حقًا ما تتوقعه إذا كنت مبتدئًا؟!؟)

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')
);

بالمناسبة: إذا كان Test2 مسموحًا به ، فسيكون لهذا بعض مزايا الأداء الدقيقة إذا كنت تقوم بتنفيذ بعض البدائل createElement - مثل بعض وظائف النص الفائق على سبيل المثال.

مثال آخر: اسأل مبتدئًا في React عما سيبدو عليه "الأطفال: PropTypes ...." إذا كان الشرط هو أن يستوفي جميع الأطفال شرطًا معينًا. أعتقد أنه لن يكون من السهل الإجابة (على الأقل بالنسبة للمبتدئين).

إلى فريق React: إذا كانت أسباب قرار التصميم المعني غير معروفة حقًا أو ربما كانت مجرد مسألة ذوق ، فلا تتردد بالطبع في إغلاق هذه المشكلة.

mcjazzyfunky في ٢٩ مايو ٢٠١٨

أفترض أن قرار عدم استخدام مصفوفة لطفل واحد قد تم اتخاذه لتجنب عمليات تخصيص المصفوفة غير الضرورية.

نظرًا لوجود بعض المشكلات الدقيقة في التعامل مع دعائم الأطفال في React.

لا نوصي عمومًا باستخدام خاصية children الصريحة. يستخدم معظم المستخدمين أيضًا JSX بدلاً من الاتصال المباشر بـ React.createElement ، لذلك لا تمثل المشكلات التي ذكرتها مشكلة في العادة.