Блог

Главная - Вопросы по программированию - Как избежать вложенной карты для повышения производительности рендеринга?

Как избежать вложенной карты для повышения производительности рендеринга?

#reactjs

Вопрос:

У меня есть эта вложенная карта, которая медленно отображается после перенаправления, я попытался отобразить только группу, и это было действительно быстро, есть идеи, как избавиться от этой вложенности, но достичь тех же результатов? также может вызвать функцию внутри return, вызывающую это падение…..

 itemSet =  [
      { id: 1, group: 'A', item : 'someitem' },
      { id: 2, group: 'A',  item : 'someitem' },
      { id: 3, group: 'B',  item : 'someitem' },
      { id: 4, group: 'B', item : 'someitem' },
    ]

const groupItems = (items) =>
  items.reduce((group, items) => {
    if (!group[items.group]) {
      group[items.group] = [];
    }
    group[items.group].push(items);
    return group;
  }, {});

const items = (item) =>
    Object.entries(groupItems(item)).map(([group, items]) => (
      <React.Fragment>
        <group name={group} />
        {items.map((item) => (
          <item
            key={item.id}
            id={item.id}
            item={item.item}
          />
        ))}
      </React.Fragment>
    ));
  return (
    <MuiThemeProvider theme={themeDark}>
      <AppBar />
      <CssBaseline />
      {items(itemSet)}
    </MuiThemeProvider>
  );

Ответ №1:

Я полагаю, что ваш способ использования заключается в отображении массива массива, сгруппированного по group . Вам придется использовать вложенные циклы, но key в первой карте отсутствует атрибут. Попробуйте добавить key туда в React.Fragment .

 const items = (item) =>
    Object.entries(groupItems(item)).map(([group, items]) => (
      <React.Fragment key={group}>
        <group name={group} />
        {items.map((item) => (
          <item
            key={item.id}
            id={item.id}
            item={item.item}
          />
        ))}
      </React.Fragment>
    ));
  return (
    <MuiThemeProvider theme={themeDark}>
      <AppBar />
      <CssBaseline />
      {items(itemSet)}
    </MuiThemeProvider>
  );

Рабочий пример для codesandbox

Комментарии:

1. вы думаете, что это вызывает падение ? тбх, я попробовал, это вроде как улучшилось…

2. Да, это одна из причин, и есть еще одна. Вы используете не 2 цикла, а 3, включая Object.entries . Можете привести рабочий пример codesandbox. Я могу проверить и помочь вам там с несколькими циклами.

3. ссылка вроде похожая

4. Обновил пример. codesandbox.io/s/ancient-dust-uxq5c?file=/index.js Не фанат for...in , но это сокращает один цикл здесь.

Метки: