Repolode
Предложить
bvaughn

bvaughn/react-window

React-компоненты для эффективного отображения больших списков и таблиц: монтируются только видимые строки и ячейки.

Открыть на GitHubСайт
Звёзды
17,199
Форки
815
Открытые issues
0
Последний коммит
5 часов назад

Что это?

react-window — библиотека React-компонентов для отображения длинных списков и сеток без замедления, которое возникает при одновременном рендеринге тысяч DOM-узлов. В ней есть компонент List для данных, организованных в строки, и компонент Grid для данных в виде строк и столбцов. Рендерятся только элементы в видимой области плюс настраиваемый буфер за её пределами.

Оба компонента принимают компонент для рендеринга строки или ячейки и количество элементов, а также необязательные props для фиксированных или динамических размеров, размеров в процентах, пользовательских ключей и позиции прокрутки. Прокруткой может управлять контейнер самого компонента, родительский элемент или окно браузера; через императивный ref доступны методы прокрутки. Типы TypeScript входят в npm-пакет.

Библиотеку устанавливают через npm; она предназначена для разработчиков React, которым нужно отображать большие наборы данных в браузере. Полная документация и ответы на частые вопросы доступны на сайте проекта.

Ключевые возможности

  • 01Рендерит только видимые строки или ячейки, сохраняя небольшой размер DOM при работе с большими наборами данных
  • 02Предоставляет List для построчных данных и Grid для двумерных табличных данных
  • 03Поддерживает фиксированную высоту строк и ширину столбцов, размеры в процентах и размеры, задаваемые функцией
  • 04Позволяет динамически измерять высоту строк с помощью хука
  • 05Поддерживает прокрутку окна или родительского элемента через scrollElement
  • 06Предоставляет императивный API через ref для прокрутки и типы TypeScript

Сценарии использования

  • Отображение тысяч сообщений чата, записей логов или элементов ленты в приложении React
  • Создание таблиц данных или сеток в стиле электронных таблиц в веб-панели управления
  • Отображение длинных списков вариантов в выпадающем меню или списке выбора без задержек
  • Встраивание виртуализированного списка в страницу, прокручиваемую вместе с окном браузера

Быстрый старт

  1. 1

    Установите библиотеку из NPM

    npm install react-window
  2. 2

    Определения TypeScript включены в опубликованную папку dist; инструкции по использованию см. на сайте документации

Что важно знать

  • Согласно README, динамическая высота строк менее эффективна, чем заранее заданные размеры.

Темы

#react#virtualization#list#grid#performance#typescript#ui-components

Частые вопросы

Что такое react-window?
React-компоненты для эффективного отображения больших списков и таблиц: монтируются только видимые строки и ячейки. react-window — библиотека React-компонентов для отображения длинных списков и сеток без замедления, которое возникает при одновременном рендеринге тысяч DOM-узлов. В ней есть компонент List для данных, организованных в строки, и компонент Grid для данных в виде строк и столбцов. Рендерятся только элементы в видимой области плюс настраиваемый буфер за её пределами.
react-window можно использовать бесплатно? Какая у него лицензия?
react-window распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
react-window всё ещё поддерживается?
Активно поддерживается. Последний коммит в react-window — 22 окт. 2026 г..
Для чего можно использовать react-window?
Отображение тысяч сообщений чата, записей логов или элементов ленты в приложении React Создание таблиц данных или сеток в стиле электронных таблиц в веб-панели управления Отображение длинных списков вариантов в выпадающем меню или списке выбора без задержек Встраивание виртуализированного списка в страницу, прокручиваемую вместе с окном браузера
Как установить react-window?
Установите библиотеку из NPM: npm install react-window Определения TypeScript включены в опубликованную папку dist; инструкции по использованию см. на сайте документации
Где скачать react-window?
Исходный код и инструкции по установке — на GitHub: https://github.com/bvaughn/react-window

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты