Ускорение вложенного списка пользовательского интерфейса материала - PullRequest
Новая
       4

Ускорение вложенного списка пользовательского интерфейса материала

0 голосов
/ 28 июня 2019

У меня есть три вложенных списка пользовательского интерфейса материалов в выдвижном ящике, и каждый список содержит около 8 элементов. Я обертываю их в компонент ссылки Mui для использования React Router. Основываясь на том, что я читал в Интернете о чистых компонентах, я также создал свой собственный чистый компонент, чтобы попытаться повысить производительность, хотя я с ними новичок и не уверен, что они являются хорошим дополнением. здесь (отчасти потому, что то, как фактически работают компоненты MUI, является абстрагированным). Во всяком случае, мне было интересно, кто-нибудь имел представление о том, как я мог бы повысить производительность на этом?

Вот код:

Один из трех пунктов списка: 

 <List
      onClick={props.stopProp}
      component="nav"
      aria-labelledby="nested-list-subheader"
      className={classes.root}
    >
      <ListItem
        className={`${
          props.area == "uc" ? classes.active : classes.inactive
        } ${classes.uc}`}
        button
        onClick={() => handleClick("uc")}
      >
        <div className={classes.keeptext}>
          <ListItemText className={classes.topnested} primary="UC" />
        </div>
        {props.open ? (
          openLists.uc ? (
            <ExpandMore className={classes.keepright} />
          ) : (
            <ExpandLess className={classes.keepright} />
          )
        ) : null}
      </ListItem>
      <Collapse in={openLists.uc} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {listItems.uc.map(el => (
            <Link component={RouterLink} to={el.url}>
              <MyListItem name={el.name} classes={classes} icon={el.icon} open={props.open}/>
            </Link>
          ))}
        </List>
      </Collapse>

и затем компонент MyListItem: 

const MyListItem = React.memo(({ name, classes, icon, open }) => {
  return (
    <ListItem button className={classes.nested}>
      <ListItemIcon>
        {icon}
      </ListItemIcon>
       <ListItemText primary={name} className={ `${open ? classes.viewText : classes.invisText} ${classes.listItemText}`} />
    </ListItem>
  );
});

РЕДАКТИРОВАТЬ: плохая производительность вызывает дрожание при расширении списков. Обычно ящик менее отзывчив. Я пытался удалить компоненты Link, которые улучшают производительность, но они мне нужны, чтобы элементы действительно имели смысл.

...