react-window — вопросы и ответы

Question 1

Что это такое?

Accepted Answer

react-window — это библиотека React-компонентов для эффективного отображения больших списков и табличных данных. Она избавляет от проблем с производительностью, которые возникают при одновременной отрисовке огромного количества DOM-элементов.

Question 2

Это UI-фреймворк или просто библиотека компонентов?

Accepted Answer

Это легковесная библиотека из двух основных компонентов, List и Grid, которые вы встраиваете в своё React-приложение, а не полноценный фреймворк.

Question 3

Как добавить её в проект?

Accepted Answer

Установите её через npm или pnpm как зависимость и импортируйте компонент List или Grid, передав ему rowComponent/cellComponent, а также количество и размеры строк или столбцов.

Question 4

Нужно ли что-то особенное для работы, например TypeScript?

Accepted Answer

Никаких особых зависимостей для работы не требуется, кроме самого React. Библиотека написана на TypeScript и поставляется с типизированными пропсами, но и проекты на обычном JavaScript могут её использовать.

Question 5

Одинаково ли Grid и List работают с настройкой высоты строк?

Accepted Answer

Строки List могут иметь динамическую высоту через хук, а размеры ячеек Grid должны быть заданы заранее (статически или вычисляемо), так как их нельзя измерить после отрисовки.

Question 6

Кто обычно использует такую библиотеку?

Accepted Answer

Разработчики React-приложений с очень большими списками или таблицами, которым нужна плавная прокрутка без отрисовки тысяч невидимых DOM-узлов. Она уже используется внутри React DevTools и браузера Replay.

Question 7

Можно ли задать свои ключи строк для списков с сортировкой или фильтрацией?

Accepted Answer

Да, и List, и Grid принимают пропсы rowKey и columnKey вместо стандартного ключа по индексу. Это помогает строкам с собственным состоянием корректно вести себя при сортировке или фильтрации.

Question 8

Можно ли изменить DOM-элемент, в который рендерится список?

Accepted Answer

Да, пропс tagName позволяет заменить корневой элемент (по умолчанию это div), если стандартные ARIA-роли не подходят для вашего случая.

Question 9

Поддерживается ли серверный рендеринг?

Accepted Answer

Да, и List, и Grid принимают пропсы defaultHeight (а Grid также defaultWidth), которые специально задают размеры для первоначального серверного вывода.

Question 10

Как управлять списком или таблицей императивно, например прокрутить к элементу?

Accepted Answer

Используйте пропсы listRef или gridRef вместе с экспортируемыми хуками useListRef и useGridRef (для TypeScript), чтобы получить императивный API для прокрутки и доступа к внешнему DOM-элементу.

Name	Description
rowComponent	React component responsible for rendering a row. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `rowProps`. ℹ️ The prop types for this component are exported as `RowComponentProps`
rowCount	Number of items to be rendered in the list.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps` dynamic row height cache returned by the `useDynamicRowHeight` hook ⚠️ Dynamic row heights are not as efficient as predetermined sizes. It's recommended to provide your own height values if they can be determined ahead of time.
rowProps	Additional props to be passed to the row-rendering component. List will automatically re-render rows when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `index`, or `style` props.

Name	Description
className	CSS class name.
style	Optional CSS properties. The list of rows will fill the height defined by this style.
children	Additional content to be rendered within the list (above cells). This property can be used to render things like overlays or tooltips.
defaultHeight	Default height of list for initial render. This value is important for server rendering.
listRef	Ref used to interact with this component's imperative API. This API has imperative methods for scrolling and a getter for the outermost DOM element. ℹ️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.
onResize	Callback notified when the List's outermost HTMLElement resizes. This may be used to (re)scroll a row into view.
onRowsRendered	Callback notified when the range of visible rows changes.
overscanCount	How many additional rows to render outside of the visible area. This can reduce visual flickering near the edges of a list when scrolling.
rowKey	Lists use the row index as a `key` by default. This prop can provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable lists, particularly if your row components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function.
tagName	Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

Name	Description
cellComponent	React component responsible for rendering a cell. This component will receive an `index` and `style` prop by default. Additionally it will receive prop values passed to `cellProps`. ℹ️ The prop types for this component are exported as `CellComponentProps`
cellProps	Additional props to be passed to the cell-rendering component. Grid will automatically re-render cells when values in this object change. ⚠️ This object must not contain `ariaAttributes`, `columnIndex`, `rowIndex`, or `style` props.
columnCount	Number of columns to be rendered in the grid.
columnWidth	Column width; the following formats are supported: number of pixels (number) percentage of the grid's current width (string) function that returns the column width (in pixels) given an index and `cellProps`
rowCount	Number of rows to be rendered in the grid.
rowHeight	Row height; the following formats are supported: number of pixels (number) percentage of the grid's current height (string) function that returns the row height (in pixels) given an index and `cellProps`

Name	Description
className	CSS class name.
dir	Indicates the directionality of grid cells. ℹ️ See HTML `dir` global attribute for more information.
style	Optional CSS properties. The grid of cells will fill the height and width defined by this style.
children	Additional content to be rendered within the grid (above cells). This property can be used to render things like overlays or tooltips.
columnKey	Grids use the column index as a `key` by default. This prop can be used along with the `rowKey` prop to provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function.
defaultHeight	Default height of grid for initial render. This value is important for server rendering.
defaultWidth	Default width of grid for initial render. This value is important for server rendering.
gridRef	Imperative Grid API. ℹ️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
onCellsRendered	Callback notified when the range of rendered cells changes.
onResize	Callback notified when the Grid's outermost HTMLElement resizes. This may be used to (re)scroll a cell into view.
overscanCount	How many additional rows/columns to render outside of the visible area. This can reduce visual flickering near the edges of a grid when scrolling.
rowKey	Grids use the row index as a `key` by default. This prop can be used along with the `columnKey` prop to provide a custom `key` value. ℹ️ Custom keys can ensure better UX for sortable or filterable grids, particularly if your cell components are stateful. Refer to the React documentation for more info. ⚠️ This prop cannot be auto-memoized because it is called during render. It is important to always `useCallback` for this prop; do not use an inline function.
tagName	Can be used to override the root HTML element rendered by the List component. The default value is "div", meaning that List renders an HTMLDivElement as its root. ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.

react-window README

Support

Installation

TypeScript types

FAQs

Documentation

List

Required props

Optional props

Grid

Required props

Optional props

react-window README

Support

Installation

TypeScript types

FAQs

Documentation

List

Required props

Optional props

Grid

Required props

Optional props

react-window (bvaughn/react-window)