Руководство для начинающих по циклам в React JSX

Руководство для начинающих по циклам в React JSX

От автора: хотите знать, как создавать циклы в React? Узнайте о JSX и о том, как использовать такие методы, как функция map, для создания цикла внутри React JSX и отображения списка элементов.

О JSX в двух словах

Если вы работали с React раньше, то существует высокая вероятность того, что вы знаете, что такое JSX, или, по крайней мере, слышали о нем. JSX — это пользовательское синтаксическое расширение JavaScript, которое используется для создания разметки с помощью React. Он может немного напоминать вам шаблонизатор, но с JSX вы можете использовать всю мощь JavaScript. Однако помните, что JSX не будет работать напрямую в браузерах и требует шага сборки для преобразования разметки JSX в вызовы функций React.createElement.

Вы можете узнать об этом больше на сайте React.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Как выполнить в JSX цикл с помощью функции map

Когда я впервые начал работать с React, я довольно рано понял, что не знаю, как перебрать массив и отобразить список элементов. Наиболее распространенный способ сделать это с помощью функции map, которая будет возвращать JSX. Вам редко понадобится цикл, отличный от этого. Ниже вы можете увидеть, как это работает.

Вы должны получить список. Однако, если вы посмотрите журнал консоли, то увидите предупреждение типа “Warning: Each child in a list should have a unique key prop”. Каждый раз, когда вы используете цикл, важно предоставить уникальный атрибут key. Причина в том, что React использует эти ключи для отслеживания изменений, добавления или удаления элементов. Ну, мы могли бы просто использовать индекс цикла, не так ли?

Добавив ключ, мы больше не получим предупреждений в консоли. Тем не менее, есть еще кое-что, что вам нужно знать. Использование индекса в качестве ключа в определенных ситуациях может привести к другой проблеме и вызвать ошибки.

Почему key важен в циклах?

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

Так что, как правило, если у вас есть массив, который можно изменить, используйте уникальный идентификатор. Если он недоступен, то создайте его для каждого элемента, прежде чем отобразить список. В противном случае можно использовать индекс для атрибута key.

До сих пор мы использовали функцию map непосредственно в выражении return. Однако, если хотите, вы можете сначала использовать переменную для хранения результатов map, а затем отобразить содержимое переменной.

Если хотите, вы можете даже использовать функцию.

Использование других циклов в React

В 99,99% случаев я использую функцию map для отображения списка элементов и, честно говоря, не могу вспомнить ни одного сценария, в котором мне понадобился еще один цикл. Тем не менее, вы не привязаны к нему и можете использовать любой цикл для отображения списка. Все это прекрасно работает:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

For-of

For-in

For-standard

Filter

Функция Filter может использоваться вместе с фильтрацией элементов map перед их отображением. Например, в приведенном ниже примере будут отображаться только элементы «Mouse» и «Horse».

Reduce

Приведенный выше пример filter можно улучшить с помощью метода reduce, и вместо двух циклов — одного для фильтрации и одного для создания контента JSX — у нас будет только один.

Если по какой-либо причине вы хотите поэкспериментировать, вы можете даже использовать рекурсию для отображения списка. Однако я бы не советовал делать это, и в большинстве случаев вам действительно следует придерживаться функции map.

Как вы можете видеть, существует несколько различных способов отображения списка элементов в React. Я надеюсь, что после прочтения этой статьи вы будете более уверенно использовать React и циклы в JSX.

Автор: Thomas Findlay

Источник: https://www.telerik.com

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: