React и очень длинные списки. Как сделать, чтобы «не лагало»?
День добрый, коллеги! Есть у нас список неограниченной длины (в перспективе). На данный момент список состоит из 26к строчек. Все это дело дико лагает при прокручивании колесиком. Разбивать на страницы это будет не совсем верно. Хотелось бы сделать что-то наподобии infinity scroll, но вот дилема: докрутив до конца, у пользователя будет все лагать также, как и лагало до этого.
Смотря стену, например, ВКонтакте, у них это реализовано тем, что старые записи убираются из DOM, а их высоту занимает специально обученный DIV.
Чтобы не делать такой велосипед, подскажите, пожалуйста, есть ли готовые варианты решения?
P.S: если что-то неясно объяснил, напишите в комментарии, поясню.
Вот готовый велосипед (и есть еще штуки 4 но у них меньше звездочек)
developerdizzle.github.io/react-virtual-list - тут сразу пример с 100К записей. Большинство тех которые я видел расчитаны только на случаи когда у нас всегда известна высота элемента списка заранее. Во вконтактиках или там линкединах чуть хитрее, там они заранее пытаются пререндрить список ну и им еще помогает то что данные подгружаются не сразу (не сразу 100К айтемов а кусками по 100 штук например). Это дает дополнительный простор для действий.
Готовых решений нет. Каждый велосипедит по своему, но все сводится к одному - в DOM-е только видимые строки. Т.е. при скролле вниз, сверху строки убираются, и наоборот при скролле вверх. Потом начинаются проблемы с отображением при очень быстрых скроллах туда-сюда, в общем творческая задача, дерзайте.
