list and keys: fix transaltion issues

Author: Windrushfarer

content/docs/lists-and-keys.md

@@ -6,9 +6,9 @@ prev: conditional-rendering.html
 next: forms.html
 ---
 
-Сначала посмотрим как мы работаем со списками в JavaScript.
+Сначала давайте вспомним, как работать со списками в JavaScript.
 
-В коде ниже мы используем функцию [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), чтобы удвоить значения в массиве `numbers`. Мы присваиваем массив, возвращаемый из `map()`, в переменную `doubled` и выводим её в консоль:
+В коде ниже мы используем функцию [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), чтобы удвоить значения в массиве `numbers`. Мы присваиваем массив, возвращаемый из `map()`, переменной `doubled` и выводим её в консоль:
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -22,9 +22,9 @@ console.log(doubled);
 
 ### Рендер нескольких компонентов {#rendering-multiple-components}
 
-Вы можете создавать коллекции элементов и добавлять их в JSX [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) с помощью фигурных скобок `{}`.
+Вы можете создавать коллекции элементов и [встраивать их в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) с помощью фигурных скобок `{}`.
 
-Ниже, мы проходим по массиву `numbers`, используя функцию JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), и возвращаем элемент `<li>` в каждой итерации. В итоге мы присваиваем получившийся массив элементов в `listItems`:
+Ниже, мы проходим по массиву `numbers`, используя функцию JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), и возвращаем элемент `<li>` в каждой итерации. Получившийся массив элементов мы сохраним в `listItems`:
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-Затем добавляем массив `listItems` внутрь элемента `<ul>` и [рендерим в DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+Затем включаем массив `listItems` внутрь элемента `<ul>` и [рендерим его в DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
 
 ```javascript{2}
 ReactDOM.render(
@@ -44,13 +44,13 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-Данный код выведет ненумерованный список с числами от 1 до 5.
+Этот код выведет список чисел от 1 до 5.
 
 ### Простой компонент-список {#basic-list-component}
 
-Обычно вы будете рендерить списки внутри [компонента](/docs/components-and-props.html).
+Как правило, вы будете рендерить списки внутри какого-нибудь [компонента](/docs/components-and-props.html).
 
-Мы можем отрефакторить предыдущий пример с использованием компонента, который принимает массив `numbers` и выводит неупорядоченный список элементов.
+Мы можем отрефакторить предыдущий пример с использованием компонента, который принимает массив `numbers` и выводит список элементов.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -70,9 +70,9 @@ ReactDOM.render(
 );
 ```
 
-Когда вы запустите данный код, то увидите предупреждение о том, что у каждого элемента массива должен быть ключ. «Ключ» – это специальный строковый атрибут, который вам необходимо добавлять при создании списка элементов. Мы обсудим почему это важно в следующей главе.
+Когда вы запустите данный код, то увидите предупреждение о том, что у каждого элемента массива должен быть ключ (key). «Ключ» – это специальный строковый атрибут, который вам необходимо добавлять при создании списка элементов. Мы обсудим, почему это важно, ниже на странице.
 
-Добавим `key` к нашему списку элементов внутри `numbers.map()` и поправим проблему его отсутствия.
+Чтобы исправить проблему с неуказанными ключами, добавим каждому элементу в списке атрибут `key`.
 
 ```javascript{4}
 function NumberList(props) {
@@ -98,7 +98,7 @@ ReactDOM.render(
 
 ## Ключи {#keys}
 
-Ключи помогают React определять какие элементы были изменены, добавлены или удалены. Ключи нужно присваивать элементам внутри массива для их явной идентификации:
+Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени:
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +109,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-Лучший способ выбрать ключ это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи:
+Лучший способ выбрать ключ – это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи:
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -119,26 +119,26 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-Когда у вас нет заданных ID для списка, то в крайнем случае можете использовать индекс элемента как ключ:
+Когда у вас нет заданных ID для списка, то в крайнем случае можно использовать индекс элемента как ключ:
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
-  // Делайте так только если у элементов массива нет заданного ID
+  // Делайте так, только если у элементов массива нет заданного ID
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-Мы не рекомендуем использовать индексы как ключи если порядок элементов может поменяться. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Посмотрите статью Робина Покорни (Robin Pokorny) с [подробным объяснением негативного влияния использования индексов как ключей](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Если вы решите не присваивать ключ к элементу списка, то React по умолчанию будет использовать индексы как ключи.
+Мы не рекомендуем использовать индексы как ключи, если порядок элементов может поменяться. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Почитайте статью Робина Покорни (Robin Pokorny), [которая объясняет, почему индексы-ключи приводят к проблемам](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Если вы опустите ключ для элемента в списке, то React по умолчанию будет использовать индексы как ключи.
 
-Вот [подробное объяснение о том, почему ключи необходимы](/docs/reconciliation.html#recursing-on-children) если вы захотели узнать больше.
+Вот [подробное объяснение о том, почему ключи необходимы](/docs/reconciliation.html#recursing-on-children).
 
 ### Извлечение компонентов с ключами {#extracting-components-with-keys}
 
-Ключи имеют значение только в пределах окружающего массива.
+Имеет смысл использовать ключи только в пределах окружающего массива.
 
-Например если вы [извлекаете](/docs/components-and-props.html#extracting-components) компонент `ListItem`, то нужно указывать ключ для `<ListItem />` в массиве, вместо элементов `<li>` внутри самого `ListItem`.
+Например, если вы [извлекаете](/docs/components-and-props.html#extracting-components) компонент `ListItem`, то нужно указывать ключ для `<ListItem />` в массиве, а не в элементе `<li>` внутри самого `ListItem`.
 
 **Пример неправильного использования ключей**
 
@@ -177,14 +177,14 @@ ReactDOM.render(
 
 ```javascript{2,3,9,10}
 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} />
   );
@@ -206,9 +206,9 @@ ReactDOM.render(
 
 Как правило, элементам внутри `map()` нужны ключи.
 
-### Ключи должны быть уникальными среди соседей {#keys-must-only-be-unique-among-siblings}
+### Ключи должны быть уникальными среди одноуровневых элементов {#keys-must-only-be-unique-among-siblings}
 
-Ключам, которые используются в массивах, нужно быть уникальными среди своих соседей. Однако они не должны быть уникальными глобально. Мы можем использовать одни и те же ключи для создания двух разных массивов.
+Ключи внутри массива должны быть уникальными только среди своих одноуровневых элементов. Им не нужно быть уникальными глобально. Можно использовать один и тот же ключ в двух разных массивах.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -248,7 +248,7 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Ключи являются подсказками для React, но они никогда не передаются в ваши компоненты. Если в компоненте нужно тоже самое значение, то передайте его явно через проп с другим именем:
+Ключи служат подсказками для React, но они никогда не передаются в ваши компоненты. Если в компоненте нужно то же самое значение, то передайте его явно через проп с другим именем:
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -280,7 +280,7 @@ function NumberList(props) {
 }
 ```
 
-JSX позволяет [встроить любое выражение](/docs/introducing-jsx.html#embedding-expressions-in-jsx) в фигурные скобки, так мы можем заинлайнить результат `map()`:
+JSX позволяет [встроить любое выражение](/docs/introducing-jsx.html#embedding-expressions-in-jsx) в фигурные скобки, так что мы можем включить результат выполнения `map()`:
 
 ```js{5-8}
 function NumberList(props) {
@@ -298,4 +298,4 @@ function NumberList(props) {
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Иногда это приводит к более чистому коду, но таким стилем так же можно злоупотреблять. Как и в JavaScript вам придется самостоятельно решать стоит ли извлекать код в переменную для читабельности. Держите в голове, что если содержимое `map()` является слишком сложным, вероятно это отличная возможность чтобы [извлечь компонент](/docs/components-and-props.html#extracting-components).
+Иногда это приводит к более чистому коду, но бывает и наоборот. Как и в любом JavaScript-коде, вам придется самостоятельно решать стоит ли извлекать код в переменную для читабельности. Не забывайте, что если код внутри `map()` слишком громоздкий, имеет смысл [извлечь его в отдельный компонент](/docs/components-and-props.html#extracting-components).