Блог

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

 {
  name: "table name",
  columns: [
    {
      name: "column1",
      token: "column1token"
    }
  ],
  rows: {
    ROWNAME1: {
      column1token: "value in ROWNAME1"
    }
 }
  

}

У меня есть функция предварительной обработки, которая изменяет структуру rows объекта в таблице, чтобы быть похожей на columns , которая сохраняется в состоянии компонента:

  {
      name: "table name",
      columns: [
        {
          name: "column1",
          token: "column1token"
        }
      ],
      rows: [
        {
           name: "ROWNAME1",
           token: "newtoken",
           values: {
             column1token: "value in ROWNAME1"
          }
     ]
   }
  

Каждый раз, когда пользователь добавляет новую строку / столбец, он вставляется в соответствующий массив со случайно сгенерированным token и пустым name значением. При изменении имени я проверяю в массивах, дублируется оно или нет.
Для таблиц меньшего размера это работает нормально, но для таблицы с более чем 300 строками это становится медленным.

Есть ли лучший подход к решению этой задачи? Может ли использование Map быть более эффективным, чем перебор массивов?

Использование Map определенно было бы быстрее, чем работа с массивами. Но что-то здесь не подходит … даже при поиске по 1000 элементам Javascript должен выполнять это очень быстро. Я бы подумал, что у вас может быть БОЛЬШАЯ перерисовка react вместо небольшого обновления DOM.

Используете ли вы key свойство для каждой строки в таблице?