Блог

Я нашел анимацию снегопада в формате html/css. Html — часть этой анимации состоит из 200 разделов .класс снега, а вот и SCSS:

 body { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow-x: hidden; filter: drop-shadow(0 0 10px white); } @function random_range($min, $max) {  $rand: random();  $random_range: $min   floor($rand * (($max - $min)   1));  @return $random_range; }  .snow {  $total: 200;  position: absolute;  width: 10px;  height: 10px;  background: white;  border-radius: 50%;  @for $i from 1 through $total {  $random-x: random() * 100vw;  $random-offset: random_range(-10, 10) * 1vw;  $random-x-end: $random-x   $random-offset;  $random-x-end-yoyo: $random-x   ($random-offset / 2);  $random-yoyo-time: random_range(3,8) / 10;  $random-yoyo-y: $random-yoyo-time * 100vh;  $random-scale: random();  $fall-duration: random_range(10, 30) * 1s;  $fall-delay: random(30) * -1s;   amp;:nth-child(#{$i}) {  opacity: random();  transform: translate($random-x, -10px) scale($random-scale);  animation: fall-#{$i} $fall-duration $fall-delay linear infinite;  }   @keyframes fall-#{$i} {  #{percentage($random-yoyo-time)} {  transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);  }   to {  transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);  }  } } }  

Я хотел сделать компонент react из этой анимации, и я сделал это с помощью стилизованных компонентов:

 const randomRange = (min: number, max: number) =gt; {  return min   Math.random() * (max - min) }  const DropAnimation = (docHeight: number, size:number) =gt; {   const xstart = Math.random() * 100; const xshift = randomRange(-10, 10); const xmiddle = xstart   xshift; const xend = xstart   xshift / 2; const middlePercentage = randomRange(30, 80)   const animation = keyframes`{  0%{  transform: translate(${xstart}vw,-10px);  }  ${middlePercentage}%{  transform: translate(${xmiddle}vw,${middlePercentage / 100 * docHeight}px);  }  100%{  transform: translate(${xend}vw,${docHeight - size}px);  } }` return animation }   const StyledSnowflake = styled.divlt;StyledSnowflakegt;`  position: absolute;  width: ${p =gt; p.size}px;  height: ${p =gt; p.size}px;  border-radius: 50%;  background-color: ${p =gt; p.color || 'white'};   animation: ${p =gt; DropAnimation(p.docHeight, p.index,p.size)} ${p =gt; randomRange(p.duration / 3, p.duration)}s  ${p =gt; -p.duration * Math.random()}s linear infinite;  filter: drop-shadow(0 0 10px ${p =gt; p.color || 'white'});  opacity: ${p =gt; p.opacity};  `  const SnowFlake: FClt;Snowflakegt; = ({docHeight, duration, index, size}) =gt; {  const opacity = Math.random();  const randomSize = Math.random() * size;   return lt;StyledSnowflake duration={duration} size={randomSize} opacity={opacity} docHeight={docHeight}  index={index}/gt; }  

Компоненты снегопада отображают 200 компонентов снежинки. Все, что я сделал, это просто скопировал css, но с точки зрения производительности мой компонент Snowfall намного хуже, все довольно сильно отстает. Почему? В чем разница между рендерингом 200 дивов из html и 200 дивов с элементами стиля из react? Как я могу ускорить эту работу? P.S. если этот вопрос слишком глуп, пожалуйста, просто оставьте мне несколько ссылок, где я мог бы прочитать об этом. Честно говоря, я даже не знаю, как решить эту проблему в Google, потому что, когда я ищу какую-либо информацию, я вижу только статьи об эффективном рендеринге в react, но я не думаю, что это то, что мне на самом деле нужно, так как я визуализирую свои компоненты один раз, но анимация все еще работает плохо.

РЕДАКТИРОВАТЬ Я обнаружил, что создание обычных дивов в react отлично работает вот так:

 lt;divgt;  {Array(200).fill(null).map((_item,i)=gt; lt;div key={i} className={styles.snow}gt;lt;/divgt;)}  lt;/divgt;  

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