[javascript] ماذا تفعل هذه النقاط الثلاث في React؟



Answers

كما تعلم ... تسمى Spread Attributes التي يمثلها الاسم يسمح بتوسيع التعبير.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

وفي هذه الحالة (سأقوم بتبسيطها).

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

هذه:

<Modal {...person} title='Modal heading' animation={false} />

مساوي ل

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

إذن باختصار ، إنه اختصار أنيق ، يمكننا القول .

Question

ماذا يفعل ... في هذا رد فعل (باستخدام JSX) رمز وما يسمى؟

<Modal {...this.props} title='Modal heading' animation={false}>



تم استخدام سمات الانتشار لتمرير الخصائص المتعددة بطريقة بسيطة

{... this.props} هو امتلاك خاصية this.props

استخدام {...} انتشار المشغل مع الدعائم أدناه

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

بدون {...} ينتشر

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

مع {...} Spread

<Child { ...this.props } />

Dan Abramov's about about Spread operator (Creator of Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=en




انها مجرد تحديد الدعائم بطريقة مختلفة في JSX !

إنها تستخدم ... مشغّل الصفيف والكائن في ES6 (الكائن غير مدعوم بالكامل حتى الآن) ، لذلك إذا كنت تقوم بالفعل بتعريف الدعامات الخاصة بك ، فيمكنك تمريرها إلى عنصرك بهذه الطريقة.

لذا في حالتك ، يجب أن يكون الرمز شيئًا كالتالي:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

لذا فإن الدعائم التي حددتها ، مفصولة الآن ويمكن إعادة استخدامها إذا لزم الأمر.

تساوي:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

هذه هي الاقتباسات من فريق React حول انتشار عامل في JSX:

JSX Spread Attributes إذا كنت تعرف جميع الخصائص التي تريد وضعها على أحد المكونات في وقت مبكر ، فمن السهل استخدام JSX:

var component = <Component foo={x} bar={y} />;

الدعائم mutating سيئة
إذا كنت لا تعرف الخصائص التي ترغب في تعيينها ، فربما تميل إلى إضافتها إلى الكائن في وقت لاحق:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

هذا هو نموذج مضاد لأنه يعني أننا لا نستطيع مساعدتك في التحقق من propTypes الصحيح حتى لاحقًا. هذا يعني أن أخطاء propTypes الخاصة بك في نهاية المطاف مع تتبع مكدس مشفر.

يجب أن تعتبر الدعائم غير قابلة للتغيير. إن تحوير الدعائم في مكان آخر قد يتسبب في عواقب غير متوقعة ، لذلك سيكون من الأجسام المتجمدة في هذه المرحلة.

سمات الانتشار
يمكنك الآن استخدام ميزة جديدة لـ JSX تسمى سمات الانتشار:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

يتم نسخ خصائص الكائن الذي يتم تمريره في الدعائم المكون.

يمكنك استخدام هذا عدة مرات أو دمجها مع سمات أخرى. ترتيب المواصفات مهم. السمات في وقت لاحق تتجاوز السابقة.

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

ما هو مع ترميز غريب ...؟
يتم دعم عامل التشغيل (أو عامل التوزيع) بالفعل في المصفوفات في ES6. يوجد أيضًا اقتراح ECMAScript لـ "استراحة الكائنات و Spread Properties". نحن نستفيد من هذه المعايير المدعومة والنامية من أجل توفير تركيب أنظف في JSX.




هذه هي ميزة من es6 الذي يستخدم في رد الفعل كذلك. انظر إلى المثال التالي:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

هذه الطريقة جيدة إذا كان لدينا 3 معلمات بحد أقصى ولكن ماذا لو احتجنا لإضافة 110 معلمات على سبيل المثال. هل يجب أن نحددها جميعًا ونضيفها واحدة تلو الأخرى ؟! بالطبع هناك طريقة أسهل للقيام بما يسمى SPREAD. بدلاً من تمرير كل تلك المعلمات التي تكتبها:

function (...numbers){} 

ليس لدينا أي فكرة عن عدد المعلمات التي لدينا ولكننا نعرف أن هناك أكوامًا منها. استنادًا إلى الإصدار es6 ، يمكننا إعادة كتابة الوظيفة أعلاه كما هو موضح أدناه واستخدام الانتشار ورسم الخرائط بينهم لتسهيل عملية قطع الكعكة:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45



تسمى تلك الحيزات. تماما كما يوحي الاسم. هذا يعني أنه يضع أي قيمة في تلك المصفوفة أو الكائنات.

مثل :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]



يتم استخدام ... (عامل التمديد) في الاستجابة لـ:

توفير طريقة نظيفة لتمرير الدعائم من المكونات الأم إلى الطفل. على سبيل المثال هذه الدعائم في المكون الأم ،

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

يمكن تمريرها بالطريقة التالية للطفل ،

<ChildComponent {...this.props} />

وهو مشابه لهذا

<ChildComponent username={this.props.username} email={this.props.email} />

ولكن الطريقة الأنظف.






Related