هل تعرف كل شيء عن مفتاح React؟

مرحبا هبر!

أقوم بإجراء مقابلات من وقت لآخر ، وعندما يكون السؤال حول مفتاح React ، غالبًا ما أرى نظرة محيرة ، ملمحًا ، "نعم ، ليس هناك ما أطرحه؟". إذا كان مفتاح React يبدو واضحًا وبسيطًا بالنسبة لك ، فدعنا نجري مقابلة مصغرة ( هذه المقالة عبارة عن نسخة من الفيديو )

مشكلة الاحماء

صياغة المشكلة

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

const users = [{
  id: 1,
  name: 'Alexander',
}, {
  id: 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}];

دعنا نحاول تقديم هؤلاء المستخدمين ، لذلك نستخدم الكود التالي:

const Users = ({ users }) => {
  return users.map((user) => {
    return (
      <User
        key={user.id}
        name={user.name}
      />
    );
  }
}

دعنا نلقي نظرة على ماهية مكون المستخدم .

class User extends PureComponent {
  componentDidMount() {
    console.log("DID MOUNT  ", this.props.name);
  }
  componentDidUpdate(prevProps) {
    console.log("DID UPDATE  ", prevProps.name, " -> ", this.props.name);
  }
  componentWillUnmount() {
    console.log("WILL UNMOUNT  ", this.props.name);
  }
  render() {
    return (
      <span>{this.props.name}</span>
    );
  }
}

لقد كتبت هذا المكون في الفصول الدراسية من أجل وضوح أفضل لدورة الحياة. وهناك نقطة أخرى أود أن ألفت انتباهكم إليها وهي PureComponent . هذا يعني أنه سيتم تحديث المكون فقط إذا تم تغيير الخصائص (props).

نتيجة لذلك ، سنرى في المتصفح شيئًا مثل الصورة التالية:

نرى قائمة من ثلاثة أسماء ، وفي وحدة التحكم نرى ثلاثة إدخالات ، وهي DID MOUNT لكل مستخدم. حتى الآن ، كل شيء منطقي ويمكن التنبؤ به.

مهمة دسيسة وسؤال

. , id, .

const users = [{
  id: 1,
  name: 'Maxim', // 'Alexander',
}, {
  id: 4, // 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}];

!

?

, ...

!

, . :

, Alexander Maxim, Dmitriy Anton, . :

1. WILL UNMOUNT Dmitriy
2. DID UPDATE Alexander Maxim
3. Dmitriy .

, ? ,

,

Anton, key name , key name , User PureComponent. .

Alexander name Maxim, props , componentDidUpdate. , .

Dmitriy, User PureComponent name, - . Dmitriy Dmitriy . WILL UNMOUN DID MOUNT.

React key. , key , key , , key, . , key , key , . , Dmitriy , ,

, !

React . index . , eslint , index key. .

, , React :

, .

, 5 .

const users = [{
  id: 1,
  name: 'Alexander',
}, {
  id: 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}, {
  id: 4,
  name: 'Artem',
}, {
  id: 5,
  name: 'Andrey',
}];

key id — index

const Users = ({ users }) => {
  return users.map((user) => {
    return (
      <User
        key={index}
        name={user.name}
      />
    );
  }
}

User .

5 DID MOUNT . , Dmitriy .

const users = [{
  id: 1,
  name: 'Alexander',
}/*, {
  id: 2,
  name: 'Dmitriy',
}*/, {
  id: 3,
  name: 'Anton',
}, {
  id: 4,
  name: 'Artem',
}, {
  id: 5,
  name: 'Andrey',
}];

, ?





.

!

WILL UNMOUNT Andrey, , Dmitriy, Andrey. 3 , . DID UPDATE .

, . 5 . , .. Dmitriy. , , .

, React. 5 , key. 4 . key. react, key, , .

.

, . , Dmitriy, props name Anton. DID UPDATE. , 3 DID UPDATE. key 5, , WILL UNMOUNT Andrey, WILL UNMOUNT Dmitriy.

id, index key. , Dmitriy, . React . , , , drag and drop, .

, :

const users = [{
  id: 1,
  name: 'Alexander',
  role: 'user',
}, {
  id: 2,
  name: 'Dmitriy',
  role: 'admin',
}, {
  id: 3,
  name: 'Anton',
  role: 'user',
}, {
  id: 4,
  name: 'Artem',
  role: 'admin',
}, {
  id: 5,
  name: 'Andrey',
  role: 'user',
}];

واعتمادًا على الدور ، إذا كان مستخدمًا عاديًا ، يتم رسم مكون المستخدم ، وإذا كان مسؤولًا ، فعندئذٍ مكون المسؤول . ل مفتاح، ما زلنا نستخدم مؤشر .

const Users = ({ users }) => {
  return users.map((user) => {
    const Component = user.role === 'admin' ? Admin : User;

    return (
      <Component
        key={index}
        name={user.name}
      />
    );
  }
}

وهنا مرة أخرى تم حذف المستخدم ديمتري .

ما رأيك في هذه الحالة ما هي السجلات التي ستكون في وحدة التحكم؟

لن أفصح عن الجواب ، سأتركه للدراسة المستقلة ...

خاتمة

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