javascript - ماهو - react.js download




ماذا تفعل هذه النقاط الثلاث في React؟ (13)

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

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

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

{... this.props} هو الاحتفاظ بملكية this.props

استخدام {...} Spread Operator مع الدعائم أدناه

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}

> 

مع {...} الحيز

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

سقسقة دان أبراموف حول مشغل الانتشار (Creator of Redux)


النقاط الثلاث في جافا سكريبت هي المشغل / الراحة .

المشغل انتشار

يسمح بناء الحيز بتوسيع التعبير في الأماكن التي يتوقع أن تكون فيها الوسائط متعددة.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

معلمات الراحة

يتم استخدام بناء جملة المعلمة rest للوظائف مع عدد متغير من الوسائط.

function(a, b, ...theArgs) {
  // ...
}

تم تقديم عامل الانتشار / الراحة للصفائف في ES6. يوجد proposal State 2 لخصائص انتشار / راحة الكائن.

كما يدعم TypeScript بناء الجملة ويمكنه ترجمة ذلك إلى الإصدارات القديمة من ECMAScript مع issues الثانوية.


باختصار ، النقاط الثلاث ... هي عامل انتشار في 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]


بالنسبة لأولئك الذين يأتون من عالم Python ، فإن سمات النشر JSX مكافئة لقوائم وسيطات Unpacking (the Python ** -operator).

أدرك أن هذا سؤال JSX ، لكن العمل مع أدوات القياس يساعد أحيانًا في الحصول عليه بشكل أسرع.


تمثل النقاط الثلاث مشغل Spread في ES6. يسمح لنا بالقيام ببعض الأشياء في Javascript:

  1. تسلسل صفائف

    var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ];
    var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
    var games = [...shooterGames, ...racingGames];
    
    console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
  2. تدمير مجموعة

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil' ];
      var [first, ...remaining] = shooterGames;
      console.log(first); //Call of Duty
      console.log(remaining); //['Far Cry', 'Resident Evil']
  3. وسيطات تعمل كصفيف

     function fun1(...params) { 
    
     }  

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

  1. تمشيط كائنين

    var myCrush = {
      firstname: 'Selena',
      middlename: 'Marie'
    };
    
    var lastname = 'my last name';
    
    var myWife = {
      ...myCrush,
      lastname
    }
    
    console.log(myWife); // {firstname: 'Selena',
                         //   middlename: 'Marie',
                         //   lastname: 'my last name'}

ثلاث نقاط ... تمثل عوامل التشغيل الموزعة أو معلمات الراحة ،

يسمح بتعبير صفيف أو سلسلة أو أي شيء يمكن تكراره في الأماكن التي يتوقع فيها وجود وسيطات صفرية أو أكثر لمكالمات الوظائف أو عناصر الصفيف.

  • دمج اثنين من المصفوفات

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

  • نسخ مجموعة:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

ملاحظة: ينتقل بناء جملة Spread بفعالية إلى مستوى واحد أثناء نسخ صفيف. لذلك ، قد لا يكون مناسبًا لنسخ المصفوفات متعددة الأبعاد كما يوضح المثال التالي (هو نفسه مع Object.assign () وبناء الجملة).

  • أضف قيم صفيف إلى آخر في فهرس معين ، على سبيل المثال 3:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

  • عند الاتصال ببناء جديد:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

  • انتشار في حرفية الكائن:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

لاحظ أنه تمت الكتابة فوق خاصية foo الخاصة بـ obj1 بواسطة خاصية obj2 foo

  • بناء جملة معلمة بقية الذي يسمح لنا بتمثيل عدد غير محدود من الوسائط كصفيف:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

ملاحظة: لا يمكن تطبيق بناء جملة Spread (بخلاف ما يتعلق بخصائص الحيز) إلا على الكائنات القابلة للتكرار: لذلك سيؤدي الخطأ التالي إلى رمي الخطأ

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Reference1

Reference2


عادة ما يسمى عامل الانتشار ، يتم استخدامه للتوسع حيثما كان ذلك مطلوبًا

مثال

const SomeStyle = {
   margin:10,
   background:#somehexa
}

يمكنك استخدام هذا في أي مكان تتطلبه أكثر حول عامل النشر Spread .


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

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


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

{...this.props} ينتشر الخصائص "الخاصة" في 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 .

نظرًا لأن children خاصية "خاصة" في props ، فسوف props الانتشار. لذلك إذا كان المكون الذي يظهر فيه هذا يحتوي على عناصر تابعة ، فسيتم نقله إلى Modal . وضع العناصر الفرعية بين علامة الفتح والعلامات الختامية هو مجرد سكر نحوي - وهو النوع الجيد - لوضع خاصية children في علامة الفتح. مثال:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);
.first {
  color: green;
}
.second {
  color: blue;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

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;
}


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

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

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

مثل :

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

ويسمى ينتشر بناء الجملة في جافا سكريبت.

انها تستخدم لتدمير مجموعة أو كائن في جافا سكريبت.

مثال:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

يمكنك القيام بذلك بنفس النتيجة باستخدام Object.assign() في javascript.

المرجع: انتشار بناء الجملة


يعتمد معنى ... على المكان الذي تستخدمه فيه في الكود ،

  1. يستخدم لنشر / نسخ المصفوفة / الكائن - يساعد على نسخ المصفوفة / الكائن وأيضًا إضافة قيم المصفوفة الجديدة / إضافة خصائص جديدة إلى الكائن ، وهو أمر اختياري.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

  1. يستخدم لدمج وسيطات الوظيفة في صفيف واحد - يمكنك بعد ذلك استخدام وظائف الصفيف عليها.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 





reactjs