Ser capaz de tratar bien a las personas que no te agradan no significa que seas hipócrita, sino que significa que eres lo suficientemente maduro para acomodarte a ellas.
En el trabajo de desarrollo de React , debería haber encontrado esta advertencia:
Advertencia: Cada niño en una lista debe tener un accesorio "clave" único
(Cada niño en una lista debe tener un accesorio clave único).
Aquí, repasamos los conceptos básicos de React:
Reaccionar elementos
- Elementos React: los elementos creados a través de JSX o (llamando directamente a React.createElement()) son todos elementos React .
- Los elementos React son los componentes básicos más pequeños de las aplicaciones React .
- A diferencia del elemento DOM de un navegador, un elemento React es solo un objeto JS simple con muy poca sobrecarga para crear.
- Los elementos de reacción son objetos inmutables . Una vez creado, no puede cambiar sus elementos o atributos secundarios. Un elemento es como un solo fotograma de una película: representa la interfaz de usuario en un momento específico.
- Los elementos de React eventualmente serán transformados en elementos DOM reales por el DOM virtual de React
Renderizado de React render()
Siempre que se llame a render(), la página se volverá a renderizar y
React comparará los elementos nuevos con los elementos antiguos a través del algoritmo de diferenciación .
Los elementos que han cambiado se encuentran por comparación, y solo se modifican los elementos cambiados, y los cambios que no se han producido no se procesarán.
Una vez que se crea un elemento React, no se puede modificar y solo se puede reemplazar por un elemento recién creado (no se preocupe por el rendimiento aquí, porque el algoritmo diff se usará para optimizar el render()).
Volviendo al problema de representación de la lista original, entendemos el papel del atributo clave : ayudar a React a identificar qué elementos se han modificado.
Para la respuesta oficial, podemos referirnos al contenido específico: Análisis en profundidad de por qué es necesaria la clave
React introdujo el atributo clave. Cuando un elemento secundario tiene una clave, React usa la clave para hacer coincidir tanto el elemento secundario en el árbol original como el elemento secundario en el árbol más nuevo.
La clave de un elemento es preferiblemente una cadena única de este elemento en la lista. Por lo general, usamos la identificación en los datos como la clave del elemento .
Para los estudiantes que no han estado expuestos a React durante mucho tiempo, debemos tener en cuenta la regla de oro de establecer el atributo clave. Pero subconscientemente usa el índice index del elemento para resolver este problema. Hacerlo es muy arriesgado. Para obtener más información, consulte: Análisis en profundidad del impacto negativo del uso de índices como claves
Recuerde las características de las matrices, al insertar/eliminar elementos, causará un costo relativamente alto.
Una buena regla general es: los elementos en el método map() deben tener el atributo clave establecido.
const cars = [
{
id: 1, branch: "Benz", price: "50W" },
{
id: 2, branch: "BMW", price: "50W" },
{
id: 3, branch: "Audi", price: "50W" },
{
id: 4, branch: "BYD", price: "50W" }
]
const carItems = cars.map((item) => {
// 注意这里的key属性
return <li key={
item.id}>{
item.branch +"-"+item.price}</li>
})
Documentación para las clases de colección indexadas: matrices
Documentación para las funciones de flecha
El contenido anterior proviene principalmente de: Sitio web oficial de React - List & Key , para contenido más interesante, se recomienda visitar el sitio web oficial.