Списки и ключи
Сначала рассмотрим, как вы преобразуете списки в JavaScript.
Учитывая приведенный ниже код, мы используем функцию map (), чтобы взять массив чисел и удвоить их значения. Мы присваиваем новый массив, возвращаемый map (), переменной doubled и регистрируем ее:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
Этот код записывает [2, 4, 6, 8, 10] на консоль. В React преобразование массивов в списки элементов практически идентично.
Рендеринг нескольких компонентов
Вы можете создавать коллекции элементов и включать их в JSX с помощью фигурных скобок {}.
Ниже мы перебираем массив чисел с помощью функции JavaScript map (). Мы возвращаем элемент <li> для каждого элемента. Наконец, мы присваиваем результирующий массив элементов для listItems:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
Мы включаем весь массив listItems в элемент <ul> и отображаем его в DOM: </ ul>
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
Этот код отображает список с цифрами от 1 до 5.
Базовый компонент списка
Обычно вы будете отображать списки внутри компонента. Мы можем преобразовать предыдущий пример в компонент, который принимает массив чисел и выводит список элементов.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Когда вы запустите этот код, вы получите предупреждение, что ключ должен быть предоставлен для элементов списка. «Ключ» - это специальный строковый атрибут, который необходимо включить при создании списков элементов. Мы обсудим, почему это важно, в следующем разделе ниже.
Давайте назначим ключ нашим элементам списка в numbers.map () и исправим проблему с отсутствующим ключом.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Ключи
Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть даны элементам в массиве, чтобы дать элементам устойчивую идентичность:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Лучший способ выбрать ключ - использовать строку, которая однозначно идентифицирует элемент списка среди его братьев и сестер. Чаще всего вы используете идентификаторы из ваших данных в качестве ключей:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
Если у вас нет стабильных идентификаторов для отображаемых элементов, вы можете использовать индекс элемента в качестве ключа в качестве крайней меры:
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
Мы не рекомендуем использовать индексы для ключей, если порядок элементов может измениться. Это может негативно повлиять на производительность и может вызвать проблемы с состоянием компонента. Посмотрите статью Робина Покорного, в которой подробно объясняются негативные последствия использования индекса в качестве ключа. Если вы решите не назначать явный ключ элементам списка, React по умолчанию будет использовать индексы в качестве ключей.
Вот подробное объяснение того, почему ключи необходимы, если вы заинтересованы в получении дополнительной информации.
Извлечение компонентов с помощью ключей
Ключи имеют смысл только в контексте окружающего массива.
Например, если вы извлекаете компонент ListItem, вам следует хранить ключ в элементах <ListItem /> в массиве, а не в элементе <li> в самом ListItem.
Пример: неправильное использование ключа
function ListItem(props) {
const value = props.value;
return (
// Wrong! There is no need to specify the key here:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Wrong! The key should have been specified here:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Пример: правильное использование ключа
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
Хорошее практическое правило заключается в том, что элементам внутри вызова map () нужны ключи.
Ключи должны быть уникальными только среди братьев и сестер
Ключи, используемые в массивах, должны быть уникальными среди их братьев и сестер. Однако они не должны быть глобально уникальными. Мы можем использовать одни и те же ключи, когда создаем два разных массива:
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}>/h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
Ключи служат подсказкой для React, но они не передаются вашим компонентам. Если вам нужно одинаковое значение в вашем компоненте, передайте его явно как реквизит с другим именем:
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
В приведенном выше примере компонент Post может читать props.id, но не props.key.
Встраивание карты () в JSX
В приведенных выше примерах мы объявили отдельную переменную listItems и включили ее в JSX:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
JSX позволяет встраивать любое выражение в фигурные скобки, чтобы мы могли встроить результат map ():
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
Иногда это приводит к более ясному коду, но этим стилем также можно злоупотреблять. Как и в JavaScript, вам решать, стоит ли извлекать переменную для удобства чтения. Имейте в виду, что если тело map () слишком вложенное, самое время извлечь компонент.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования