Приведи пример реализации сложной фитчи

Question

Приведи пример реализации сложной фитчи

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Одна из сложных фитч — бесконечная лента с виртуализацией и подгрузкой данных. Реализация требует:

Виртуализации списка (рендерим только видимые элементы)
Подгрузки данных при скролле
Оптимизации перерисовок

Пример на React с использованием react-window:

import { FixedSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

const InfiniteList = ({ items, loadMore, hasMore }) => {
  const onScroll = ({ scrollOffset }) => {
    if (scrollOffset > items.length * 30 - 500 && hasMore) {
      loadMore();
    }
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          width={width}
          itemCount={items.length}
          itemSize={50}
          onScroll={onScroll}
        >
          {({ index, style }) => (
            <div style={style}>
              Item {items[index].id}
            </div>
          )}
        </List>
      )}
    </AutoSizer>
  );
};

Ключевые моменты:

react-window рендерит только видимые элементы
AutoSizer подстраивает размеры под контейнер
Подгрузка срабатывает при приближении к концу списка
Минимальные перерисовки благодаря виртуализации

Ответ 18+ 🔞

Да ты посмотри, какая хуйня придумана — бесконечная лента, да ещё с виртуализацией! Это ж надо было так мозги выебать, чтобы не просто скроллить, а ещё и подгружать по ходу дела, да так, чтобы комп не лег от тысячи элементов.

Короче, суть в трёх пунктах, блядь:

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

Вот смотри, как на React с react-window это выглядит, код не трогаю, он святой:

import { FixedSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

const InfiniteList = ({ items, loadMore, hasMore }) => {
  const onScroll = ({ scrollOffset }) => {
    if (scrollOffset > items.length * 30 - 500 && hasMore) {
      loadMore();
    }
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          width={width}
          itemCount={items.length}
          itemSize={50}
          onScroll={onScroll}
        >
          {({ index, style }) => (
            <div style={style}>
              Item {items[index].id}
            </div>
          )}
        </List>
      )}
    </AutoSizer>
  );
};

А теперь, сука, разжёвываю:

react-window — это наш главный по виртуализации, он как хитрая жопа, рисует только те элементы, которые юзеру глазеть надо.
AutoSizer — этот чувак автоматом подгоняет размеры списка под родительский контейнер, чтобы не ебаться с расчётами вручную.
Подгрузка триггерится, когда до конца осталось условно 500 пикселей — чтоб заранее, без рывков, всё плавненько.
И да, перерисовки минимальные, потому что виртуализация, блядь! Не весь список дергается, а только видимая часть. Красота, ёпта!