React.js російською мовою. Частина восьма



Переклад офіційної документації бібліотеки React.js російською мовою.

Зміст:
1 — Частина перша — Установка
2 — Частина друга — Впровадження JSX
3 — Частина третя — Вивід елементів
4 — Частина четверта — Компоненти і властивості
5 — Частина п'ята — Стан і життєвий цикл
6 — Частина шоста — Обробка подій
7 — Частина сьома — Умовний рендеринг
8 — Частина восьма — Списки і ключі
9 — Частина дев'ята (скоро)

Списки і ключі
Для початку, давайте розглянемо, як перетворити списки JavaScript. У наведеному нижче прикладі, ми використовуємо функцію map()», щоб вважати масив пристроїв «numbers» і подвоїти їх значення. Ми задаємо новий масив пристроїв, повернутий з допомогою map()», за допомогою подвоєною змінної і зареєстрували її наступним чином:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

Цей код заносить [2, 4, 6, 8, 10] в консоль. У React перетворення масивів пристроїв в списки елементів відбувається аналогічним чином.

Рендеринг декількох компонентів
Ви можете створювати колекції елементів і включити їх в JSX, використовуючи фігурні дужки {}.

Далі, ми переберемо масив
"numbers"
, використовуючи функцію
JavaScript "map()"
.Ми повертаємо елемент
"<li>"
для кожної одиниці. Наостанок, ми присвоюємо отриманий масив елементів до
"listItems"
:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);

Ми включаємо весь масив
"listItems"
елемент
<ul>
і виносимо його в DOM:

ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);

Спробуйте на CodePen. Цей код виводить маркірований список чисел між 1 і 5.

Базовий список компонентів
Як правило, ви генерує списки всередині компонента.

Ми можемо перепроектувати попередній приклад компонент, який приймає масив «numbers» і виводить ненумерованний список елементів.

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

При виконанні цього коду з'явиться попередження про те, що для елементів списку потрібний ключ. «Key» — це спеціальний рядковий атрибут, який потрібно включити при створенні списків елементів. У наступному розділі ми розповімо, чому він так важливий.

Задамо «key» нашим списком елементів всередині «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')
);

Спробуйте на CodePen.

Ключі (Keys)

Ключі допомагають React визначити елементи, які були змінені, додані або видалені. Елементи всередині масиву повинні бути забезпечені ключами, щоб мати стабільну ідентичність:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);

Кращий спосіб підібрати ключ — використовувати рядок, яка однозначно ідентифікує елемент списку серед інших. Найчастіше, у якості ключів ви будете використовувати ідентифікатори (ID) з ваших даних:

const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);

Якщо у вас немає стабільних ідентифікаторів (ID) для генерованих елементів, в крайньому випадку, в якості ключа ви можете використовувати індекс (index) елемента:

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);

Ми не рекомендуємо використовувати індекси для ключів у разі якщо елементи можуть змінити порядок, так як це буде відбуватися повільно.

Витяг компонентів за допомогою ключів

Ключі мають сенс тільки в контексті навколишнього масиву. Наприклад, якщо ви витягаєте компонент
"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')
);

Спробуйте на CodePen. Практичне правило полягає в тому, що елементи всередині запиту 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')
);

Спробуйте на CodePen.

Для React ключі служать в якості підказки, але вони не передаються вашим компонентів. Якщо вам потрібно одне і те ж значення в компоненті, надайте його безпосередньо в якості опори з іншим ім'ям:

const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);

У наведеному вище прикладі, компонент Post» може прочитати «props.id», а не «props.key».

Вбудовування «map()» в 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>
);
}

Спробуйте на CodePen.

Іноді виходить більш зрозумілий код, але не варто цим зловживати. Як і в JavaScript, чи варто витягати змінну для легкості читання — вирішувати вам. Майте на увазі, що якщо map()» теж вкладений, то можна отримати той чи інший компонент.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.