3 способа рендеринга компонента React в определенное время

Допустим, у вас есть компонент React с именем ComponentA, и вы хотите отображать его в определенное время. Есть 3 способа достичь цели.

1. Для цикла

Старомодный способ. Большинству людей легко приходит в голову эта идея, если они программисты. Вы просто помещаете компонент в массив в цикле for. А затем визуализировать массив.

const COUNT = 10
const ComponentA = () => <div>test</div>;

export default function App() {
  const arr = [];
  for (let i = 0; i < COUNT; i += 1) {
    arr.push(<ComponentA key={i}/>);
  }

  return <>{arr}</>;
}

2. Массив определенной длины и карта с оператором расширения

const COUNT = 10
const ComponentA = () => <div>aaaa</div>;

export default function App() {
  return (
    <>
      {[...Array(COUNT)].map((_, index) => (
        <ComponentA key={index} />
      ))}
    </>
  );
}

Если вы используете метод карты для массива с определенной длиной, как показано ниже, он терпит неудачу.

{Array(COUNT).map((_, index) => (
    <ComponentA key={index} />
  ))}t

Это связано с тем, что Array(Count) только что создал пустой массив длиной COUNT, а map возвращает пустой массив. Вы можете проверить это в своем браузере.

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

3. Массив определенной длины и сопоставления без использования оператора спреда

Возможно, кто-то из читателей это уже заметил. Да, вы можете сделать то же самое, что и предыдущий вариант. На самом деле, оператор расширения — не единственный способ получить массив с таким же количеством элементов, как и его длина.

Например, вы также можете использовать Array.from, как показано ниже.

const COUNT = 10
const ComponentA = () => <div>aaaa</div>;

export default function App() {
  return (
    <>
      {Array.from({length: COUNT}).map((_, index) => (
        <ComponentA key={index} />
      ))}
    </>
  );
}

Вы также можете использовать метод .fill для заполнения массива элементами.

const COUNT = 10
const ComponentA = () => <div>aaaa</div>;

export default function App() {
  return (
    <>
      {Array(COUNT).fill().map((_, index) => (
        <ComponentA key={index} />
      ))}
    </>
  );
}