Question

我在滑出式抽屉中有三个嵌套的Material UI列表，每个列表包含大约8个项目。我将它们包装在Mui链接组件中以使用React Router。根据我在网上阅读的有关纯组件的内容，尽管我还是纯组件的初学者，但我不确定自己是否是一个很好的补充，但我也制作了自己的纯组件来尝试提高性能。这里（部分是因为MUI组件的实际工作方式是抽象的）。无论如何，我想知道是否有人对如何提高此性能有任何想法？

代码如下：

三个列表项之一：

"mobilephone://Test?index=1"

，然后是MyListItem组件：

 <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>

编辑：当我扩展列表时，糟糕的表现是一种颤抖的行为。通常，抽屉也反应较慢。我曾尝试删除确实会提高性能的Link组件，但我需要它们来使它们实际上有一点。

加快Material UI嵌套列表的速度

0 个答案: