antd Dialog 学习笔记
聊聊 AntD 中的 Dialog
先介绍三种常用的用法，
- 受控模式，通过 visible 控制 Dialog 在目标组件中的显示,这个时最简单的用法。
const Demo: React.FC = () => {
const [visible, setVisible] = React.useState<boolean>(false);
return (
<Modal visible={visible} close={() => setVisible(false)}>
<div>I am dialog body</div>
</Modal>
);
};
- 函数式调用，但是 Dialog 组件还在调用者的 VD 树上，可以通过 context 对其页面刷新进行影响，但是通过 setState 很难，因为闭包的原因或者类似于 memo 的原因，dialog body 以及不在最近一次刷新的范畴内，因为它属于闭包。
Notes:必须要将 elements 放到 render 函数里面
const Demo:React.FC=()=>{
const [fns,elements]=Modal.useModal();
const openDialog=()=>{
const {update,destory}=fns.info({
content:<div>I am dialog body</div>
})
}
return (
<Button onClick={()=>openDialog()}>Open Dialog</Button>
{elements}
)
}
- 函数式调用，但是 Dialog 组件以及不在调用者的 VD 树上了，连 Context 也无法影响到它了。
function openDialog() {
const { update, destory } = Modal.info({
content: <div>I am dialog body</div>,
});
}
rc-dialog 这个组件职责是什么？
这些个组件总是很复杂，让人看的云里雾里，很多的辅助功能将原本的功能给掩盖了，让初学者看得很累。
- 它负责将某个组件(DialogBody)Portal 到 getContainer 下面，默认是 document.body。
- 它提供了一些额外的功能，例如 Mask, Dialog 外面在添加 header,close,footer 等。
- 它还提供了动画，还有垂直方向滚动条出现时的页面抖动问题，通过修改 width 来实现
关闭的过程逻辑如下： onClose -> 外部组件调用 setVisible(false), Dialog 然后发现 visible=false, -> CSSMotion 开始走 leave 动画，动画结束后发出 afterClose 事件，然后在 DialogWrapper 里面会 返回 null,
这样整个 Dialog 就返回 null.
antd-modal 这个组件封装了什么？
- Modal 这个组件，提供了默认的 footer,样式，类名，关闭按钮等这些东西。
- ConfirmDialog 这个组件是在Modal的基础上做了封装，它去除了 Modal 里面默认的 header,footer,完全由自己内部定义实现了。注意是为了提供 info,warning,error,confirm,success 这五种风格的弹框。
- HookModal 是封装了ConfirmDialog,它负责关闭与刷新 ConfirmDialog,同时将这两个接口暴露给外面。它是给useModal使用的。
- useModal() hook 函数，提供了函数式动态打开 info,warning,error,confirm,success弹框的方式，这种方式创建的组件需要放在当前调用组件的 render 函数里，同在一棵树上。
- info(),warning(),error(),confirm(),success(),也是函数式调用打开弹框，但是他们不在当前调用树上面。
学习一下useModal,
它的功能就是返回一个 ReactElement（用作容器）,以及往这个 ReactElement 里面添加（删除）一个元素的方法。它主要使用了usePatchElement()这个 hook 函数，这个函数很简单，很有用。它就是返回一个容器，以及往容器中添加元素的方法，调用这个方法会返回删除这个元素的方法。我们只要将这个容器放到我们调用的 VD 上就行了，同时，我们可以通过 memo,让这个容器里的东西不参与当前 VD 的刷新，来提高性能。
export default function usePatchElement(): [
React.ReactElement[],
(element: React.ReactElement) => Function
] {
const [elements, setElements] = React.useState<React.ReactElement[]>([]);
const patchElement = React.useCallback((element: React.ReactElement) => {
// append a new element to elements (and create a new ref)
setElements((originElements) => [...originElements, element]);
// return a function that removes the new element out of elements (and create a new ref)
// it works a little like useEffect
return () => {
setElements((originElements) =>
originElements.filter((ele) => ele !== element)
);
};
}, []);
return [elements, patchElement];
}
考虑写一个函数式弹框的组件，由如下需求：
- 可以带 title,或者不带 title,或者定制化的 title,
- closable icon
- 可以带 footer,或者不带 footer,ok? cancel? button
- 支持在特定的位置弹出来，或者居中弹出
- 支持同一棵 VD 树，或者不同的 VD 树。
在写这个函数的过程中遇到些问题
- 在写依靠某个元素弹出组件的方法时，采用的时 rc-dialog 给它传递一个 rendModal 的方法。这个 rendModal 方法里面采用了 rc-Align 组件。
const modalRender = React.useMemo(() => {
if (dependedElement === null) {
return undefined;
} else {
const targetType: TargetType = () => {
return dependedElement;
};
return (element: React.ReactNode) => {
return (
<Align key="align" target={targetType} align={align}>
//<>{element}</> 这种方式是不行的，它是一个Fragment,Align
必须要求这个是一个 ReactElement,
因为会设置它的样式，它必须得是个元素。
{element as React.ReactElement}
</Align>
);
};
}
}, [dependedElement, align]);
- 我写好后，发现打开的组件跑偏了，不在 viewport 里面后来找到了原因，我用了 antd 里面的Modal,同时给它传递了一个有效的 transition, 因为动画的问题，是的 dom-align 算了好几次，然后它算的不及时，所以最后的状态不对，就跑偏了，解决方法，一个就是调用 Align 放出的 forceUpdate ref 方法，但是很遗憾，rc-dialog 没有放出 motion onAppearEnd,onEnterEnd这些事件，我没有办法在动画结束的时候调用forceUpdate, 如果用 setTimeout 去做还是有个问题，不知道动画何时结束。强行设置 1000ms, 页面会有停顿感，效果很差。后来采用第二种方法，把动画给关了，直接穿了个''，搞定了。
