antd 源码试读

1. dialog

dialog/src/DialogWrap.tsx

import createReactClass from 'create-react-class';
import Dialog from './Dialog';
import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';

看到了代码可以这么用，以为create-react-class是第三方库，查阅后发现是react自带的模块，不用ES6的写法，而使用这种方式应该是为了使用mixin
不使用 ES6

React 模态框秘密和“轮子”渐进设计提到了一般我们将modal的dom节点渲染到body下面，其中的原因是怕调用modal的组件里面使用了绝对定位，而modal的绝对定位的z-index会小于调用组件的z-index值，从而导致modal不会出现在最上面，其实在实际的开发中，如果modal的z-index写死的话，那么我们控制自己组件的z-index的时候，只需要小于modal的z-index值就可以了。rc-dialog和react-modal都是将modal挂载到了body下面，而element-UI有两种方式，一种是渲染到了调用组件的内部，但是mask是挂载到了body下面，第二种是将modal直接挂载到了body下面，他们是通过append-to-body这个props控制的。在嵌套的 Dialog这一demo里面dialog上面又弹出了个dialog，内嵌的dialog挂载到了body下面，官方的解释：
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。通过chrome element面板可以看出，内嵌的dialog dom和外面dialog的mask是同级的，后面发现内嵌的dialog的也是用的这个mask，当内嵌的dialog弹出的时候，mask的z-index的值变大，所以覆盖了外面的dialog的z-index值，这样就是用js去控制mask和内嵌dialog的z-index的值
回到react的modal，rc-dialog只是控制隐藏和显示modal，而react-modal是通过销毁dom来隐藏modal的。rc-dialog官方的example，Working with many modal.两个层级的modal 是通过后面div覆盖前面的div来实现的层级，并没有设置z-index属性，遮罩是在每个modal里面设置的，并没有直接挂在在body下面。

该文章的Fake Modal 还不是很理解，到底和modal有什么关系呢？谁是真正的modal？