Компоненты высшего порядка в React Virtualized

Компоненты высшего порядка (HOC) в React Virtualized — это мощный способ улучшить и расширить функциональность существующих компонентов, не изменяя их основную логику. HOC принимают на вход один компонент и возвращают на выходе новый, улучшенный, что позволяет повторно использовать код и инкапсулировать сложное поведение. В этой статье мы рассмотрим ключевые HOC в React Virtualized и продемонстрируем, как их можно использовать для создания более функциональных и производительных приложений.

Рассмотрим некоторые основные HOC в React Virtualized

ArrowKeyStepper

HOC ArrowKeyStepper позволяет компоненту реагировать на события нажатия клавиш-стрелок, что делает его идеальным выбором для создания списков с возможностью навигации или сеток с поддержкой клавиатурной навигации. ArrowKeyStepper особенно полезен, если вы хотите оптимизировать доступность и пользовательский опыт.

Пример использования:

ReactDOM.render(
  <ArrowKeyStepper columnCount={columnCount} rowCount={rowCount}>
    {({onSectionRendered, scrollToColumn, scrollToRow}) => (
      <Grid
        columnCount={columnCount}
        onSectionRendered={onSectionRendered}
        rowCount={rowCount}
        scrollToColumn={scrollToColumn}
        scrollToRow={scrollToRow}
        {...otherGridProps}
      />
    )}
  </ArrowKeyStepper>,
  document.getElementById('example'),
);

AutoSizer

HOC AutoSizer автоматически регулирует ширину и высоту компонента в зависимости от доступного пространства, обеспечивая отзывчивость макета. Это важно для компонентов, которые должны динамически адаптироваться к различным размерам экрана.

Пример использования:

ReactDOM.render(
  <AutoSizer>
    {({height, width}) => (
      <List
        height={height}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={width}
      />
    )}
  </AutoSizer>,
  document.getElementById('example'),
);

CellMeasurer

HOC CellMeasurer автоматически измеряет содержимое ячейки, временно отображая его таким образом, чтобы он не был виден пользователю. Этот подход полезно применять для сеток, где размеры ячеек могут варьироваться. Таким образом обеспечиваются точные измерения для эффективного рендеринга.

Пример использования:

return (
    <CellMeasurer
      cache={cache}
      columnIndex={columnIndex}
      key={key}
      parent={parent}
      rowIndex={rowIndex}
    >
      <div
        style={{
          ...style,
          height: 35,
          whiteSpace: 'nowrap'
        }}
      >
        {content}
      </div>
    </CellMeasurer>
  );

ColumnSizer

HOC ColumnSizer рассчитывает ширину столбцов для ячеек сетки динамически на основе содержимого или других факторов. Он будет особенно эффективен для сеток, где ширину столбцов нужно регулировать, чтобы оптимально вписать контент.

Пример использования:

ReactDOM.render(
  <ColumnSizer
    columnMaxWidth={100}
    columnMinWidth={50}
    columnCount={numColumns}
    width={someCalculatedWidth}>
    {({adjustedWidth, getColumnWidth, registerChild}) => (
      <Grid
        ref={registerChild}
        columnWidth={getColumnWidth}
        columnCount={numColumns}
        height={someCalculatedHeight}
        cellRenderer={someCellRenderer}
        rowHeight={50}
        rowCount={numRows}
        width={adjustedWidth}
      />
    )}
  </ColumnSizer>,
  document.getElementById('example'),
);

InfiniteLoader

HOC InfiniteLoader управляет получением данных, когда пользователь прокручивает список, таблицу или сетку. Это облегчает реализацию бесконечной прокрутки, загружая дополнительные данные по мере того, как пользователь прокручивает большой набор данных.

Пример использования:

ReactDOM.render(
  <InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowCount={remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={300}
      />
    )}
  </InfiniteLoader>,
  document.getElementById('example')
);

MultiGrid

HOC MultiGrid декорирует компонент сетки, чтобы добавить фиксированные столбцы и/или строки. Такой подход полезен для создания сложных макетов сетки с фиксированными элементами для улучшения пользовательского опыта.

Пример использования:

function render() {
  return (
    <MultiGrid
      cellRenderer={cellRenderer}
      columnWidth={75}
      columnCount={50}
      fixedColumnCount={2}
      fixedRowCount={1}
      height={300}
      rowHeight={40}
      rowCount={100}
      width={width}
    />
  );
}

ScrollSync

HOC ScrollSync синхронизирует прокрутку между двумя или более компонентами, обеспечивая связанное поведение прокрутки между различными разделами страницы. Это улучшает процесс навигации пользователя и оптимизирует пользовательский опыт.

Пример использования:

function render(props) {
  return (
    <ScrollSync>
      {({
        clientHeight,
        clientWidth,
        onScroll,
        scrollHeight,
        scrollLeft,
        scrollTop,
        scrollWidth,
      }) => (
        <div className="Table">
          <div className="LeftColumn">
            <List scrollTop={scrollTop} {...props} />
          </div>
          <div className="RightColumn">
            <Grid onScroll={onScroll} {...props} />
          </div>
        </div>
      )}
    </ScrollSync>
  );
}

WindowScroller

HOC WindowScroller позволяет компоненту таблицы или списка прокручиваться в зависимости от положения прокрутки окна. Это полезно для компонентов, которые должны синхронизироваться с общим состоянием прокрутки страницы, обеспечивая таким образом плавную прокрутку.

Пример использования:

ReactDOM.render(
  <WindowScroller>
    {({ height, isScrolling, onChildScroll, scrollTop }) => (
      <List
        autoHeight
        height={height}
        isScrolling={isScrolling}
        onScroll={onChildScroll}
        rowCount={...}
        rowHeight={...}
        rowRenderer={...}
        scrollTop={scrollTop}
        width={...}
      />
    )}
  </WindowScroller>,
  document.getElementById('example')
);

Включение этих HOC в компоненты React Virtualized позволяет разработчикам создавать более функциональные и производительные приложения. Используя описанные готовые специализированные функции, вы можете расширить возможности основных компонентов без ущерба для их простоты и возможности повторного использования. Нужна ли вам клавиатурная навигация, динамическое изменение размера, бесконечная или синхронизированная прокрутка, — компоненты высшего порядка React Virtualized предлагают надежное решение для удовлетворения ваших потребностей.

Читайте также:

• 10 рекомендаций по повышению производительности от экспертов JS React
• Топ-10 инструментов, которые понадобятся каждому React-разработчику в 2024 году
• Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Onix React: React Virtualized HOCs