Эта статья изначально была опубликована по адресу https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to- использовать-цикл-в-реакции-js

Как и в случае с операторами if / else, когда мы хотим выполнять циклы в логике JavaScript или TypeScript, нам не нужно беспокоиться о каких-либо специальных правилах.

Как всегда, это просто цикл JS, и мы можем использовать все типы циклов (конечно, не все из них подходят для всех случаев, но это возможно).

В любом случае, у нас есть особая причина, по которой мы должны сосредоточиться на методах итераций при разработке приложений для React.js.

Мы используем методы итерации для визуализации элементов. Например, мы можем использовать итерацию для визуализации всего списка продуктов из массива продуктов.

Для этого мы можем использовать несколько методов, одним из самых популярных является метод map, но мы рассмотрим карту в отдельном разделе, и теперь мы должны сосредоточиться на других методах, таких как циклы или метод forEach.

Очень популярно использовать такие циклы, как for-loop (в большинстве случаев самый быстрый), for-in или for-of для перебора элементов.

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

Второй метод, который я включил в пример, - это метод с array.forEach ().

Этот метод, по сравнению с for-loops и map, является самым медленным и не возвращает значения, как карта, поэтому вам нужен особый случай для его использования.

Давайте посмотрим на пример кода с двумя методами for-loop и forEach:

// First one with For of loop
function renderComponent() {
 const products = [‘orange’, ‘apple’, ‘watermelon’];
 const list = []
 for (const [i, product] of products.entries()) {
   list.push(<li>{product}</li>)
 }
 return (
   <div>
     {list}
   </div>
  )
}
function Parent(props) {
 return renderProducts();
}

// Second with forEach method
function renderComponent() {
  const products = [‘orange’, ‘apple’, ‘watermelon’];
  const list = []
  
  products.forEach((product) => {
    list.push(<li>{product}</li>)
  })
  return (
    <div>{list}</div>
  )
}
function Parent(props) {
 return renderProducts();
}

Спасибо за внимание,
Радек из Дуомли.