¿Sabes todo sobre React key?

¡Hola, Habr!

Hago entrevistas de vez en cuando, y cuando la pregunta es sobre la tecla React , la mayoría de las veces veo una mirada perpleja que insinúa: "Sí, ¿no hay nada que preguntar?". Si React key le parece claro y simple, entonces realicemos una mini entrevista ( este artículo es una transcripción del video )

Problema de calentamiento

Formulación del problema

Imagina que tenemos una matriz de tres usuarios. La estructura del usuario es lo más primitiva posible, solo hay 2 campos, este es id - un identificador único y el segundo nombre de campo - el nombre de usuario real.

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

Intentemos renderizar a estos usuarios, para ello usamos el siguiente código:

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

Echemos un vistazo a qué es el componente Usuario .

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

Escribí este componente en clases para una mejor claridad del ciclo de vida. Y un punto más sobre el que me gustaría llamar su atención es PureComponent . Esto significa que el componente se actualizará solo si se cambian las propiedades (props).

Como resultado, en el navegador veremos algo como la siguiente imagen:

Vemos una lista de tres nombres, y en la consola vemos tres entradas, a saber, DID MOUNT para cada usuario. Hasta ahora, todo es lógico y predecible.

Pregunta y tarea de intriga

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

Y dependiendo del rol, si es un usuario regular, se dibuja el componente Usuario , y si es administrador, entonces el componente Admin . Para la clave, todavía usamos index .

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

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

Y aquí nuevamente se eliminó al usuario Dmitriy .

¿Qué crees que en este caso qué registros habrá en la consola?

No revelaré la respuesta, la dejaré para estudio independiente ...

Conclusión

No hay un resumen particular en este artículo. Espero que te hayas interesado y tengas curiosidad por completar mis tareas y tal vez hayas descubierto algo nuevo para ti, y si te gustó tanto y quieres más, sigue el enlace