Виртуализация React: эффективная обработка больших списков и сеток

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

Но прежде чем мы начнем, если вам понравился этот пост и вы хотели бы узнать больше о моих взглядах на программирование и технологии, я приглашаю вас подписаться на меня в Medium и Twitter для получения регулярных обновлений.

Что такое React-виртуализация?

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

Основной концепцией виртуализации является работа с окнами. Вместо рендеринга всего списка или сетки виртуализация React создает «окно» с видимым контентом и отображает только компоненты в этом окне. Когда пользователь прокручивает, окно перемещается, и React интеллектуально отключает компоненты, которые прокручиваются вне поля зрения, и монтирует те, которые прокручиваются в поле зрения.

Рефакторинг для повышения производительности

Давайте рассмотрим распространенный пример неоптимизированного кода, где мы пытаемся отобразить большой список пользователей, полученный из базы данных Firebase.

import React from 'react';
import { db } from './firebase';

class UserList extends React.Component {
  state = { users: [] };

  componentDidMount() {
    db.ref('users').on('value', snapshot => {
      let users = [];
      snapshot.forEach(snap => {
        users.push(snap.val());
      });
      this.setState({ users: users });
    });
  }
  
  render() {
    return (
      <div>
        {this.state.users.map((user, index) => (
          <div key={index}>{user.name}</div>
        ))}
      </div>
    );
  }
}

export default UserList;

Хотя этот код отлично работает для небольшого списка пользователей, он начнет замедляться по мере роста списка. Чтобы реорганизовать это, мы можем использовать виртуализацию React с помощью библиотеки react-window.

import React from 'react';
import { db } from './firebase';
import { FixedSizeList as List } from 'react-window';

class UserList extends React.Component {
  state = { users: [] };

  componentDidMount() {
    db.ref('users').on('value', snapshot => {
      let users = [];
      snapshot.forEach(snap => {
        users.push(snap.val());
      });
      this.setState({ users: users });
    });
  }

  Row = ({ index, style }) => (
    <div style={style}>{this.state.users[index].name}</div>
  );

  render() {
    return (
      <List
        height={500}
        itemCount={this.state.users.length}
        itemSize={35}
        width={300}
      >
        {this.Row}
      </List>
    );
  }
}

export default UserList;

Получение больших списков из базы данных Firebase в реальном времени

Извлечение больших наборов данных в режиме реального времени также может привести к проблемам с производительностью. Один из способов справиться с этим — разбить данные из Firebase на страницы.

Это включает в себя установку ограничения на количество записей, извлекаемых за раз, а затем выборку большего количества записей по мере необходимости. Чтобы получить данные из Firebase на страницах, вы можете использовать методы limitToFirst или limitToLast в сочетании с startAt, endAt или equalTo.

componentDidMount() {
  let ref = db.ref('users').orderByKey();

  ref.limitToFirst(50).once('value', snapshot => {
    let users = [];
    snapshot.forEach(snap => {
      users.push(snap.val());
    });
    this.setState({ users: users });
  });
}

В этом коде мы используем orderByKey() для упорядочения записей и limitToFirst(50) для получения первых 50 записей.

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

loadMoreUsers() {
  let lastKey = this.state.users[this.state.users.length - 1].key;
  let ref = db.ref('users').orderByKey().startAt(lastKey);

  ref.limitToFirst(50).once('value', snapshot => {
    let users = [...this.state.users];
    let newUsers = [];
    snapshot.forEach(snap => {
      newUsers.push(snap.val());
    });
  // Remove first user because it's duplicate
    newUsers.shift();

  this.setState({ users: [...users, ...newUsers] });
  });
}

В loadMoreUsers() мы получаем следующие 50 записей, начиная с последнего ключа в нашем списке текущих пользователей.

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

Заключение

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

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

Если вы нашли этот пост полезным и хотите узнать больше о React или других темах в области технологий, подпишитесь на меня в Medium и Twitter, чтобы получить больше информации, советов и руководств. Ваша поддержка очень много значит, и она помогает мне продолжать создавать такой контент.

В конце концов, путь к тому, чтобы стать лучшим разработчиком, заключается в постоянном обучении и совершенствовании, и я здесь, чтобы поддержать вас на этом пути. Удачного кодирования!