Material UI 对话框变为 Hook 闪烁

Question

我试图将 Material UI 的对话框变成“useDialog”挂钩，以便它跟踪它自己的打开状态。

不幸的是，我遇到了一个问题，每当我更新层次结构中的状态时，对话框就会闪烁，我不确定为什么以及如何规避它。我觉得某个地方需要 useRef，但我不确定。这是一个复制的最小示例：https://codesandbox.io/s/flickering-dialog-minimal-example-ehruf ?file=/src/App.js

以及有问题的代码：

    import React, { useState } from "react";
    import {
      Button,
      Dialog,
      DialogActions,
      DialogContent,
      DialogTitle
    } from "@material-ui/core";

    export default function App() {
      const [openDialog, Dialog] = useDialog();
      const [counter, setCounter] = useState(0);

      return (
        <div>
          <Dialog title="Hello">
            <div>{counter}</div>
            <button onClick={() => setCounter(counter => counter + 1)}>
              Increase
            </button>
          </Dialog>
          <button onClick={openDialog}>Open dialog</button>
        </div>
      );
    }

    const useDialog = () => {
      const [open, setOpen] = useState(false);
      const handleClose = () => {
        setOpen(false);
      };

      const someDialog = ({ title, children }) => {
        return (
          <Dialog open={open} onClose={handleClose}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>{children}</DialogContent>
            <DialogActions>
              <Button onClick={handleClose} color="primary">
                Close
              </Button>
            </DialogActions>
          </Dialog>
        );
      };
      return [
        () => {
          setOpen(true);
        },
        someDialog
      ];
    };

Answer 1

对话框闪烁的原因是在App. 旧的Dialog被卸下并被新的取代Dialog。

经验法则是您永远不应该在渲染时定义组件。

这就是为什么我建议您将自定义对话框组件与useDialog钩子分开：

const MyDialog = ({ open, handleClose, title, children }) => {
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

但是，您可以保留一些内部逻辑useDialog并重用它们：

const useDialog = () => {
  const [open, setOpen] = useState(false);
  const openDialog = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const props = {
    open,
    handleClose
  };
  return [openDialog, props];
};

更多关于为什么从钩子返回组件可能是一个坏主意的信息。

Answer 2

自定义挂钩不是为了返回组件而创建的，而是用于创建由不同组件共享的公共逻辑。

对于您的情况，我建议您为对话框创建一个通用组件。并在任何你想要的地方使用这个组件。像这样：

<CustomDialog open={open}>
// Your jsx here
</CustomDialog>

const CustomDialog = ({children}) => {
return <Dialog open={open} onClose={handleClose}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>{children}</DialogContent>
            <DialogActions>
              <Button onClick={handleClose} color="primary">
                Close
              </Button>
            </DialogActions>
          </Dialog>
}

有关自定义挂钩的更多信息：

https://reactjs.org/docs/hooks-custom.html