打开/关闭material-ui Dialog组件时避免重新渲染答案

【问题标题】：Avoid re-render while open/close material-ui Dialog component打开/关闭material-ui Dialog组件时避免重新渲染
【发布时间】：2021-09-17 19:40:47
【问题描述】：

我在单击打开对话框组件的按钮时忽略重新渲染有一些问题。目前我使用 useState 标志来切换我的 Dialog 组件，但我必须避免重新渲染，因为对大数据进行昂贵的操作。

任何人都知道如何通过单击对话框按钮Open 和Close 对话框打开对话框Exit。

const Item = () => {

    const popupRef = useRef()

    const dialog = () => {
        return(
            <Dialog ref={popupRef}
                    keepMounted
                    fullWidth
                    maxWidth="md"
                    aria-labelledby="alert-dialog-slide-title"
                    aria-describedby="alert-dialog-slide-description">
                <DialogTitle id="alert-dialog-slide-title">
                    <WrapperDialogHeader>Filters</WrapperDialogHeader>
                    <WrapperDialogCloseBtn>
                        <IconButton aria-label="close" >
                            <CloseIcon />
                        </IconButton>
                    </WrapperDialogCloseBtn>
                </DialogTitle>
                <DialogContent>
                   Something 
                </DialogContent>
                <DialogActions>
                    <Button variant="outlined"
                            // onClick={ What handler here? }
                            color="primary">
                        <WrapperDialogOptionBtn>Exit</WrapperDialogOptionBtn>
                    </Button>
                </DialogActions>
            </Dialog>
        )
    }

    return(
        <>
            <IconButton onClick={ /* What method here */ }>
                <Typography variant="body1" color="primary">
                    <FilterListIcon fontSize="small" color="primary"/><WrapperFontSpecialSmall>Filters</WrapperFontSpecialSmall>
                </Typography>
            </IconButton>
            { dialog() }
        </>

我想像 popupRef.current.click() 这样的方法在 ES6 中不存在。
如何构建无需重新渲染整个组件项即可切换对话框的机制。

【问题讨论】：

标签： reactjs react-hooks material-ui rerender use-ref

【解决方案1】：

将对话框移动到它自己的组件并包裹在memo()中

const Dialog = ({ open, onClose }) => {

  return (
    <Dialog
      keepMounted // why? you said the content is huge, so why keep it mounted
      fullWidth
      maxWidth="md"
      aria-labelledby="alert-dialog-slide-title"
      aria-describedby="alert-dialog-slide-description"
      open={open}
      onClose={onClose}
    >
      <DialogTitle id="alert-dialog-slide-title">
        <WrapperDialogHeader>Filters</WrapperDialogHeader>
        <WrapperDialogCloseBtn>
          <IconButton aria-label="close" >
            <CloseIcon />
          </IconButton>
        </WrapperDialogCloseBtn>
      </DialogTitle>
      <DialogContent>
        Something
      </DialogContent>
      <DialogActions>
        <Button variant="outlined" onClick={onClose} color="primary">
          <WrapperDialogOptionBtn>Exit</WrapperDialogOptionBtn>
        </Button>
      </DialogActions>
    </Dialog>
  )
};

export default memo(Dialog); // IMPORTANT

在Item 组件中，

const Item = () => {
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleDialogOpen = () => setDialogOpen(true);
  
  // prevent function being recreated on state change
  const handleDialogClose = useCallback(() => setDialogOpen(false), []);

  return (
   <>
      <IconButton onClick={handleDialogOpen}>
        <Typography variant="body1" color="primary">
          <FilterListIcon fontSize="small" color="primary" /><WrapperFontSpecialSmall>Filters</WrapperFontSpecialSmall>
        </Typography>
      </IconButton>
      <Dialog open={dialogOpen} onClose={handleDialogClose} />
   </>
  );
}

旁注，对话框似乎包含某种过滤器 UI，可能是一个或多个列表。如果您要创建长列表，可能需要查看react-window。

【讨论】：