React.js (4) Отображение массивов. Атрибут key.

Коль скоро у нас есть одна уже готовая статья, то нам осталось научиться отображать в нашем приложении все остальные статьи из массива.


Все статьи по React.js

Идем в файл App.js и видим, что у нас там подключен файл fixtures.js, где хранятся наши статьи в виде массива, но пока что мы его использовали только для того, чтобы взять первый элемент массива (одну статью) - <Article article={articles[0]}/>. Давайте научимся показывать список полностью.

Для этого мы заведем отдельный компонент.

Каждый раз, когда вы в React.js задумываетесь о том, что пора добавить какой-то функционал, стоит задуматься над тем, что его стоит вынести в отдельный компонент.

В папке components мы создадим новый файл - ArticleList.js.

компонент не будет иметь никакого дополнительного состояния, соответственно, мы можем сделать его в виде обычного функционального компонента (функция).

В начале файла сделали импорт компонента React и сразу же сделали экспорт нашего компонента в виде функции. В props нашей функции будет приходить массив статей - {articles}

Возвращать функция будет статьи в виде списка return(<ul>
<li></li>
</ul>);
ArticleList.js.

  import React from 'react'
  import Article from './Article'
  export default function ArticleList({articles}) {
        return(
            <ul>
               <li><Article article={articles[0]}/></li>
               <li><Article article={articles[1]}/></li>
               <li><Article article={articles[2]}/></li>
            </ul>
          );
  }

И изменим импорт в файле App.js - Вместо import Article from './Article' (одной статьи) -> import ArticleList from './ArticleList.

И конечно же строку вывода - <Article articles={articles[0]}/>

изменить на <ArticleList articles={articles}/>
App.js

  import React from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'

  function App() {
    return (
      <div>
          <h1>App Name</h1>
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App

Запускаем сервер -

   npm start

Должно получиться как на картинке внизу

Таким образом у нас получился вывод трех статей.

Но мы хотим сделать вывод всех статей из массива.

Для этого идем в файл ArticleList.js и вспомним про то, что когда мы пишем JSX, то на самом деле мы пишем не что иное, как обычный JavaScript. Это значит что у нас есть все возможности. как в обычном JavaScript.

Так как на входе мы получаем массив из объектов - {articles}, мы можем првратить массив на выходе в массив из реактовских элементов и отобразить уже его.

Для этого идеально подходит метод Array.prototype.map(), который итерируется по массиву и для каждого элемента возвращает новый (заданный нами) элемент и в результате мы получаем массив из других каких-то элементов.

Наша задача превратить каждый элемент <li><Article article={articles[0]}/></li> в реактовский элемент.

Для этого :

  const articleElements = articles.map(article =>
      <li><Article article = {article}/></li>
     )

Теперь остается отобразить наши элементы на странице в виде списка

   <ul>
     {articleElements}
   </ul>

Файл ArticleList.js.

   import React from 'react'
   import Article from './Article'
   export default function ArticleList({articles}) {
         const articleElements = articles.map(article =>
             <li><Article article = {article}/></li>
           )
         return(
             <ul>
               {articleElements}
             </ul>
           );
   }

Теперь, вы можете еще раз проверить и убедиться. что отображается весь список статей.

Но в консоли вы увидите предупреждение, которое говорит нам о том, что каждый элемент массива должен иметь уникальное свойство - key

Ключ надо дать в "верхней обертке", чтобы он был уникальным в пределах этого массива, предсказуемым. Идеальный кандидат это article.id

   const articleElements = articles.map(article =>
       <li key = {article.id}><Article article = {article}/></li>
   )

После этого исчезнет это грозное предупреждение.

Вот так просто мы смогли отобразить весь список статей.

При изменении какого то элемента в массиве, React создает виртуальный DOM и сравнивает элементы. Так же как в обычных массивах для него будет очень важен порядковый номер элемента. И если при удалении элемента с конца это происходит легко, то удаление (изменение) первого элемента в массиве заставит переставить ВСЕ элементы массива.

В нашем случае, это также актуально и для виртуального DOM React. Это очень затратный процесс.

Для того, чтобы "подсказать" React с какими данными он работает мы можем связать React элементы, которые он отображает с нашими данными. В таком случае он явно "увидит, что отсутствует первая статья (потому что нет ключа), а остальные без изменений, и тогда React просто удалит первую статью, вместо того, чтобы вносить огромное количество изменений во все элементы, (проверяя их и передвигая).

Соответственно ключи должны быть связаны с React элементами, которые за них отвечают. А это значит, что на роль ключа НЕ подходят: индексы в массиве или случайные числа.

Идеальные это - идентификаторы, или например title статьи.

В этот раз мы изменяли файлы ArticleList.js и App.js. Ниже я привел их полностью.

App.js

  import React from 'react'
  import ArticleList from './ArticleList'

  import articles from '../fixtures.js'

  function App() {
    return (
      <div>
          <h1>App Name</h1>
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App  

ArticleList.js

  import React from 'react'
  import Article from './Article'
  export default function ArticleList({articles}) {
        const articleElements = articles.map(article =>
            <li key = {article.id}><Article article = {article}/></li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
  }

Все статьи по React.js