Apakah Anda tahu semua tentang kunci React?

Halo, Habr!

Saya melakukan wawancara dari waktu ke waktu, dan ketika pertanyaannya adalah tentang kunci React , paling sering saya melihat ekspresi bingung, mengisyaratkan, "Ya, tidak ada yang perlu ditanyakan?". Jika kunci React terlihat jelas dan sederhana bagi Anda, maka mari lakukan wawancara singkat ( artikel ini adalah transkrip dari video )

Masalah pemanasan

Rumusan masalah

Bayangkan kita memiliki array tiga pengguna. Struktur pengguna sesederhana mungkin, hanya ada 2 kolom, ini adalah id - pengenal unik dan nama kolom kedua - nama pengguna sebenarnya.

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

Mari kita coba merender pengguna ini, untuk ini kami menggunakan kode berikut:

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

Mari kita lihat apa itu komponen User .

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

Saya menulis komponen ini di kelas untuk kejelasan siklus hidup yang lebih baik. Dan satu hal lagi yang ingin saya perhatikan adalah PureComponent . Ini berarti bahwa komponen akan diperbarui hanya jika properti (props) diubah.

Alhasil di browser kita akan melihat sesuatu seperti gambar berikut:

Kami melihat daftar tiga nama, dan di konsol kami melihat tiga entri, yaitu DID MOUNT untuk setiap pengguna. Sejauh ini, semuanya logis dan dapat diprediksi.

Tugas dan pertanyaan intrik

. , 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',
}];

Dan tergantung pada perannya, jika itu adalah pengguna biasa, komponen Pengguna diambil, dan jika itu adalah administrator, maka komponen Admin . Untuk kuncinya, kami masih menggunakan index .

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

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

Dan di sini lagi pengguna Dmitriy telah dihapus .

Bagaimana menurut Anda dalam hal ini log apa yang akan ada di konsol?

Saya tidak akan mengungkapkan jawabannya, saya akan tinggalkan untuk studi mandiri ...

Kesimpulan

Tidak ada ringkasan khusus dalam artikel ini. Saya harap Anda hanya tertarik dan ingin tahu untuk menyelesaikan tugas saya dan mungkin Anda menemukan sesuatu yang baru untuk diri Anda sendiri, dan jika Anda sangat menyukainya dan ingin lebih, ikuti tautannya