时间戳

首页 > 解决方案 > React : 切换 PopUp 会重新渲染整个组件

reactjs - React : 切换 PopUp 会重新渲染整个组件

问题描述

我仍然在弄清楚 React 的来龙去脉，所以请在这里耐心等待。

我使用 MaterialUI 制作了一个组件，该组件包含一个网格和一个 PopOver。一个粗略的模型可能如下所示：

export const Overblik = () => {
    const [filterAnchorEl, setFilterAnchorEl] = useState<HTMLButtonElement | null>(null);

    return (
      <div>
      <IconButton onClick={handleFilterClick}></IconButton>
          <Popover
            anchorEl={filterAnchorEl}
            open={Boolean(filterAnchorEl)}
            onClose={handleFilterClose}
            anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left'
          }}><div>stuff</div></Popover>
          <Grid>[somelongListGoesHere]</Grid>
        </div>
        );
      }

现在的问题是，当我切换 filterAnchorEl 状态以显示弹出框时，标有的网格[somelongListGoesHere]也会重新渲染，从而使弹出框看起来很慢。我认为我的方法一定有问题，但是关于如何更好地处理这个问题有什么建议吗？

标签： reactjstypescriptmaterial-ui

解决方案

尝试将网格移动到另一个组件

const MyGrid = () => (<Grid>[somelongListGoesHere]</Grid>)

然后在你的组件中渲染它

 <IconButton onClick={handleFilterClick}></IconButton>
 <Popover ... />
 <MyGrid />

如果组件没有 props 更改，MyGrid则不会重新渲染。你也可以React.memo像这样缓存它：

const MyGrid = React.memo(() => (<Grid>[somelongListGoesHere]</Grid>))

推荐阅读