React : 切换 PopUp 会重新渲染整个组件答案

【问题标题】：React : Toggling PopUp re-renders entire componentReact : 切换 PopUp 会重新渲染整个组件
【发布时间】：2020-09-14 02:11:32
【问题描述】：

我仍在弄清楚 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] 的网格也会重新渲染，从而使弹出框看起来很慢。我认为我的方法一定有问题，但是关于如何更好地处理这个问题有什么建议吗？

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

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

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

然后在你的组件中渲染它

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

如果 MyGrid 组件没有任何 props 更改，则不会重新渲染。你也可以使用React.memo 来缓存它：

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

【讨论】：