Skip to content

Commit f42c79a

Browse files
committed
fix: make it more readable
1 parent 27fc795 commit f42c79a

File tree

1 file changed

+6
-7
lines changed

1 file changed

+6
-7
lines changed

src/content/learn/rendering-lists.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ JSX элементы, созданные внутри `map()` всегда до
287287

288288
</Note>
289289

290-
Ключи позволяют React узнать к какому элементу массива соответствует каждый компонент, чтобы позже сопоставить их. Это становится важным, если элементы массива могут перемещаться (например, из-за сортировки), добавляться или удаляться. Хорошо выбранный ключ помогает React понять, какое именно изменение произошло, и правильно обновить DOM дерево.
290+
Ключи позволяют React узнать к какому элементу массива соответствует каждый компонент, чтобы позже сопоставить их. Это важно, если элементы массива могут перемещаться (например, из-за сортировки), добавляться или удаляться. Хорошо выбранный ключ помогает React понять, какое именно изменение произошло, и правильно обновить DOM дерево.
291291

292292
Вместо генерации ключей на лету, вы должны включать их в свои данные:
293293

@@ -402,8 +402,7 @@ const listItems = people.map(person =>
402402

403403
Разные источники данных предоставляют разные источники для ключей:
404404

405-
* **Данные из базы данных:** Если ваши данные приходят с базы данных,
406-
то вы можете использовать ключи/ID с базы данных, которые по своей природе уникальны.
405+
* **Данные из базы данных:** Если ваши данные приходят с базы данных, то вы можете использовать ключи/ID с базы данных, которые по своей природе уникальны.
407406

408407
* **Локальные данные:** Если ваши данные генерируются и хранятся локально (к примеру, заметки в приложении для ведений заметок), используйте инкрементный счетчик, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) или пакет [`uuid`](https://www.npmjs.com/package/uuid) при создании элементов.
409408

@@ -435,7 +434,7 @@ const listItems = people.map(person =>
435434
* Как перенести данные из компонентов в структуры данных, такие как массивы и объекты.
436435
* Как создавать коллекции схожих компонентов с помощью JavaScript `map()`.
437436
* Как создавать массивы отфильтрованных элементов с помощью JavaScript `filter()`.
438-
* Зачем и как присваивать ключ каждому компоненту в коллекции чтобы React мог отслеживать каждый из них, даже если их позиция или данные изменятся.
437+
* Зачем и как присваивать ключ каждому компоненту в коллекции, чтобы React мог отслеживать изменения каждого из них.
439438

440439
</Recap>
441440

@@ -445,7 +444,7 @@ const listItems = people.map(person =>
445444

446445
#### Разделение списка на два {/*splitting-a-list-in-two*/}
447446

448-
Этот пример показывает список всех людей.
447+
Этот пример показывает список всех людей в `people`.
449448

450449
Поменяйте код так, чтобы он показывал два списка один за другим: **Химики** и **Все остальные**. Как и раньше, вы можете определить, является ли человек химиком, проверив `person.profession === 'химик'`.
451450

@@ -765,9 +764,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
765764

766765
</Sandpack>
767766

768-
Очень внимательный читатель мог бы заметить, что при двух вызовах `filter` мы дважды проверяем профессию каждого человека. Проверка свойства происходит очень быстро, поэтому в данном примере это нормально. Если бы ваша логика была более затратна, вы могли бы заменить вызовы `filter` циклом, который вручную создает массивы и проверяет каждого человека один раз.
767+
Очень внимательный читатель мог бы заметить, что при двух вызовах `filter` мы дважды проверяем профессию каждого человека. Проверка свойства происходит очень быстро, поэтому в данном примере это нормально. Если бы ваша логика была более затратна, вы могли бы заменить вызовы `filter` на цикл, который вручную создает массивы и проверяет каждого человека один раз.
769768

770-
К тому же, если `people` никогда не меняется, вы можете переместить этот код из вашего компонента. С точки зрения React, единственное что имеет значение, это то, что вы предоставляете массив JSX-узлов в конце. React не важно, как вы создаете этот массив:
769+
К тому же, если `people` никогда не меняется, вы можете вынести этот код из вашего компонента. С точки зрения React, единственное что имеет значение, это то, что вы предоставляете массив JSX-узлов в конце. React не важно, как вы создаете этот массив:
771770

772771
<Sandpack>
773772

0 commit comments

Comments
 (0)