javascript شرح - ماذا تفعل هذه النقاط الثلاث في React؟




ماهو ترجمة (11)

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

مثل :

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

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

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

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

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

this.props = {
  username: "danM",
  email: "[email protected]"
}

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

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

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

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

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


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

{... 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


كما تعلم ... تسمى 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} />

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


تسمى النقاط الثلاث (...) مشغل الانتشار ، وهذا مشابه من الناحية المفاهيمية لمشغل توزيع الصفيف ES6 ، تستفيد JSX من هذه المعايير المدعومة والنامية من أجل توفير تركيب أنظف في JSX

خصائص Spread في إصدارات مبدئي الكائن تملك خصائصًا لا تعد ولا تحصى من كائن تم توفيره إلى الكائن الذي تم إنشاؤه حديثًا.

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

مرجع:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html


إجابة محدثة (أبريل 2018)

هي خاصية انتشار الملكية ، والتي يتم إضافتها في ES2018 ( اقتراح هنا ، في مسودة المواصفات here ) ، ولكن مدعومة منذ فترة طويلة في مشاريع React عبر transpilation (باسم "خصائص انتشار JSX" على الرغم من أنك تستطيع القيام بذلك في مكان آخر ، وليس فقط السمات) .

{...this.props} الخصائص في الدعائم كخصائص منفصلة (سمات) في عنصر Modal الذي تقوم بإنشائه. على سبيل المثال ، إذا كانت this.props تحتوي a: 1 و b: 2 ،

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

سيكون هو نفسه

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

لكنها ديناميكية ، لذلك يتم تضمين أي خصائص في props .

مدون الانتشار مفيد ليس فقط لحالة الاستخدام هذه ، ولكن لإنشاء كائن جديد مع معظم (أو كل) خصائص كائن موجود - والذي يظهر كثيرًا عند تحديث الحالة ، حيث لا يمكنك تعديل الحالة مباشرة:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

الذي يستبدل this.state.foo جديد به جميع الخصائص مثل foo باستثناء خاصية ، والتي تصبح "updated" :

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
  max-height: 100% !important;
}

الإجابة الأصلية (يوليو 2015)

هذه سمات انتشار JSX :

سمات الانتشار

إذا كان لديك بالفعل ككائن ، وكنت ترغب في تمريره في JSX ، فيمكنك استخدام ... كمشغل "انتشار" لتمرير كائن الدعائم بأكمله. هذان العنصران متساويان:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

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

اعتادت الوثائق أن تذكر أنه على الرغم من أن هذا هو (JSX) في الوقت الحالي ، هناك اقتراح لإضافة Object Rest و Spread Properties إلى JavaScript نفسها. (كانت JavaScript مسترخية وموزعة للصفائف منذ ES2015 ، ولكن ليس لخصائص الكائن.) اعتبارًا من نوفمبر 2017 ، يكون هذا الاقتراح في المرحلة 3 وكان لفترة من الوقت. يدعم كل من Chrome V8 و Firefox SpiderMonkey ذلك ، لذا يفترض إذا تم إعداد لغة المواصفات في الوقت المناسب ، فستكون المرحلة الرابعة قريبًا وجزءًا من مواصفات لقطة ES2018. (مزيد من المعلومات حول المراحل here .) وقد دعمها Transpilers لبعض الوقت (حتى بشكل منفصل عن JSX).

ملاحظة جانبية: على الرغم من أن اقتباس 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

هذه ميزة جديدة في ES6 / هارموني. يطلق عليه المشغل سبريد. فهو يتيح لك إما فصل الأجزاء المكونة لمجموعة / كائن ، أو أخذ عناصر / معلمات متعددة وغراءها معًا. هنا مثال:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

ومع كائن / مفاتيح:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

ما هو رائع حقا يمكنك استخدامه لتعني "بقية القيم".

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

باختصار ، النقاط الثلاث ... هي عامل انتشار في ES6 (ES2015). سوف عامل انتشار جلب جميع البيانات.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];

console.log (ب)؛ اعط النتيجة [1،2،3،4،5،6]

console.log (ج)؛ اعط النتيجة [7،8،1،2،3،4]


انها مجرد تحديد الدعائم بطريقة مختلفة في 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.


إذا كان الناس قلقين من use strict ، فقد يكون من المفيد مراجعة هذا المقال:

دعم ECMAScript 5 'وضع صارم' في المتصفحات. ماذا يعني هذا؟
NovoGeek.com - مدونة كريشنا

يتحدث عن دعم المتصفح ، ولكن الأهم من ذلك كيفية التعامل معه بأمان:

function isStrictMode(){
    return !this;
} 
/*
   returns false, since 'this' refers to global object and 
   '!this' becomes false
*/

function isStrictMode(){   
    "use strict";
    return !this;
} 
/* 
   returns true, since in strict mode the keyword 'this'
   does not refer to global object, unlike traditional JS. 
   So here, 'this' is 'undefined' and '!this' becomes true.
*/




javascript reactjs