目錄
一、組件結構
1、antd代碼結構
2、rc-ant代碼結構
3、組件結構
二、antd組件調用關系及功能詳解
1、Model.tsx
2、confirm
三、rc-dialog詳解
1、e.target 與 e.currentTarget
2、onMouseDown、onMouseUp 和 onClick
3、理解dialog中的鼠標事件
4、思維導圖
一、組件結構
1、ant代碼結構
2、rc-ant代碼結構
3、組件結構
ant中modal的index.tsx中引入了Modal和confirm
Modal包含的不同狀態method（info、Sucesses等）都是通過調用confirm方法傳遞不同參數實現
Modal中引用rc-dialog，做彈窗的渲染
二、antd組件調用關系
1、Model.tsx
modal中的方法包括
-
handleCancel：在點擊取消按鈕時觸發，觸發時調用this.props.onCancel()
- handleOk：在點擊OK按鈕時觸發，觸發時調用this.props.onOk()
-
componentDidMount：生命周期，掛在完成時觸發
-
renderFooter：確認、取消按鈕所在的彈框底部內容處理
-
render：渲染方法，包括本地化等
- Modal.method()：Modal允許使用method方法創建信息提示框，包含五種方法均引自confirm
2、confirm
confirm中的方法包括
- close：Modal.method()方法調用后返回的引用內容，可以用於關閉彈框，詳見官方文檔說明 https://ant.design/components/modal-cn/#Modal.method()
-
update：與close類似，用於更新彈框
- destroy：React非16版本中處理關閉彈框的方法
- render：渲染信息窗體ConfirmDialog
- ConfirmDialog：組件，根據方法參數config渲染信息Dialog
上圖中代碼圖片清晰大圖如下：
三、rc-dialog詳解
1、e.target 與 e.currentTarget
- currentTarget： event對象屬性，返回當前處理該事件的元素、文檔或窗口。
- target： event對象屬性，返回觸發該事件的元素、文檔或窗口。
2、onMouseDown、onMouseUp 和 onClick
如果用戶在一個元素上點擊，那么最少三個事件會被觸發，事件發生順序：
- mousedown,當用戶在這個元素上按下鼠標鍵的時候
- mouseup，當用戶在這個元素上松開鼠標鍵的時候
- click，當一個mousedown和一個mouseup都在這個元素上被檢測到的時候發生
- 由第3點引申：鼠標在mousedown和mouseup之間移動拖拽的，根據時間冒泡，mouseup、mousedown所在的公同父元素會觸發click事件
3、理解dialog中的鼠標事件
3.1 mousedown在dialog外click的執行順序
- 觸發onMaskMouseUp：if條件不滿足，什么操作都不執行
- 觸發onMaskClick：!this.dialogMouseDown一定成立，e.target 與 e.currentTarget值也相同
- 結果：關閉彈窗
- 注：mousedown在dialog外，mouseup在dialog內時，click中 e.target === e.currentTarget 依然成立，都是Mask。結果不變，關閉窗口
3.2 mousedown在dialog內click的執行順序
- 觸發onDialogMouseDown：this.dialogMouseDown賦值為true
- 觸發onMaskMouseUp：if條件成立，timeout事件加入任務隊列
- 觸發onMaskClick：this.dialogMouseDown 為true，if條件不成立
- 結果：不關閉彈窗
- timeout事件執行：this.dialogMouseDown還原為false
- 注：mousedown在dialog內，mouseup在dialog外時，click中 e.target === e.currentTarget 依然成立，都是Mask。this.dialogMouseDown 也依然為true。結果不變，不關閉窗口
4、思維導圖
