Wissen Sie alles über React Key?

Hallo Habr!

Ich mache von Zeit zu Zeit Interviews, und wenn es um den React-Schlüssel geht , sehe ich meistens einen verwirrten Blick, der andeutet: "Ja, es gibt nichts zu fragen?". Wenn Ihnen der React-Schlüssel klar und einfach erscheint, führen wir ein Mini-Interview ( dieser Artikel ist eine Abschrift des Videos ).

Aufwärmproblem

Formulierung des Problems

Stellen Sie sich vor, wir haben drei Benutzer. Die Benutzerstruktur ist so primitiv wie möglich, es gibt nur 2 Felder, dies ist id - eine eindeutige Kennung und der zweite Feldname - der tatsächliche Benutzername.

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

Versuchen wir, diese Benutzer zu rendern. Dazu verwenden wir den folgenden Code:

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

Werfen wir einen Blick auf die Benutzerkomponente .

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

Ich habe diese Komponente in Klassen geschrieben, um den Lebenszyklus besser zu verstehen. Ein weiterer Punkt, auf den ich Sie aufmerksam machen möchte, ist PureComponent . Dies bedeutet, dass die Komponente nur aktualisiert wird, wenn die Eigenschaften (Requisiten) geändert werden.

Als Ergebnis sehen wir im Browser so etwas wie das folgende Bild:

Wir sehen eine Liste mit drei Namen und in der Konsole drei Einträge, nämlich DID MOUNT für jeden Benutzer. Bisher ist alles logisch und vorhersehbar.

Intrigenaufgabe und Frage

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

Und je nach der Rolle, ob es ein normaler Benutzer ist, der Benutzer wird die Komponente gezogen, und wenn es ein Administrator, dann ist die Admin - Komponente . Für den Schlüssel verwenden wir weiterhin den Index .

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

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

Und auch hier wurde der Benutzer Dmitriy gelöscht .

Was denkst du in diesem Fall, welche Protokolle werden in der Konsole sein?

Ich werde die Antwort nicht offenlegen, ich werde sie für ein unabhängiges Studium belassen ...

Fazit

In diesem Artikel gibt es keine besondere Zusammenfassung. Ich hoffe, Sie waren nur interessiert und neugierig, meine Aufgaben zu erledigen, und vielleicht haben Sie etwas Neues für sich entdeckt. Wenn es Ihnen so gut gefallen hat und Sie mehr wollen, folgen Sie dem Link