antd源碼分析之——對話框（modal）

目錄

1、組件結構

一、antd代碼結構

二、rc-ant代碼結構

三、組件結構

2、antd組件調用關係及功能詳解

一、Model.tsx

二、confirm

3、rc-dialog詳解

一、e.target 與 e.currentTarget

二、onMouseDown、onMouseUp 和 onClick

三、理解dialog中的鼠標事件

四、思惟導圖

 

1、組件結構

一、ant代碼結構

 二、rc-ant代碼結構

三、組件結構

 

ant中modal的index.tsx中引入了Modal和confirm

Modal包含的不一樣狀態method（info、Sucesses等）都是經過調用confirm方法傳遞不一樣參數實現

Modal中引用rc-dialog，作彈窗的渲染

2、antd組件調用關係

一、Model.tsx

modal中的方法包括

• handleCancel：在點擊取消按鈕時觸發，觸發時調用this.props.onCancel()
• handleOk：在點擊OK按鈕時觸發，觸發時調用this.props.onOk()
• componentDidMount：生命週期，掛在完成時觸發
• renderFooter：確認、取消按鈕所在的彈框底部內容處理
• render：渲染方法，包括本地化等
• Modal.method()：Modal容許使用method方法建立信息提示框，包含五種方法均引自confirm

 二、confirm

confirm中的方法包括

• close：Modal.method()方法調用後返回的引用內容，能夠用於關閉彈框，詳見官方文檔說明 https://ant.design/components/modal-cn/#Modal.method()
• update：與close相似，用於更新彈框
• destroy：React非16版本中處理關閉彈框的方法
• render：渲染信息窗體ConfirmDialog
• ConfirmDialog：組件，根據方法參數config渲染信息Dialog

上圖中代碼圖片清晰大圖以下：

 

 3、rc-dialog詳解

一、e.target 與 e.currentTarget

• currentTarget： event對象屬性，返回當前處理該事件的元素、文檔或窗口。
• target： event對象屬性，返回觸發該事件的元素、文檔或窗口。

二、onMouseDown、onMouseUp 和 onClick

若是用戶在一個元素上點擊，那麼最少三個事件會被觸發，事件發生順序：

1. mousedown,當用戶在這個元素上按下鼠標鍵的時候
2. mouseup，當用戶在這個元素上鬆開鼠標鍵的時候
3. click，當一個mousedown和一個mouseup都在這個元素上被檢測到的時候發生
4. 由第3點引伸：鼠標在mousedown和mouseup之間移動拖拽的，根據時間冒泡，mouseup、mousedown所在的公同父元素會觸發click事件

三、理解dialog中的鼠標事件

3.1 mousedown在dialog外click的執行順序

1. 觸發onMaskMouseUp：if條件不知足，什麼操做都不執行
2. 觸發onMaskClick：!this.dialogMouseDown必定成立，e.target 與 e.currentTarget值也相同
3. 結果：關閉彈窗

• 注：mousedown在dialog外，mouseup在dialog內時，click中 e.target === e.currentTarget 依然成立，都是Mask。結果不變，關閉窗口

3.2 mousedown在dialog內click的執行順序

1. 觸發onDialogMouseDown：this.dialogMouseDown賦值爲true
2. 觸發onMaskMouseUp：if條件成立，timeout事件加入任務隊列
3. 觸發onMaskClick：this.dialogMouseDown 爲true，if條件不成立
4. 結果：不關閉彈窗
5. timeout事件執行：this.dialogMouseDown還原爲false

• 注：mousedown在dialog內，mouseup在dialog外時，click中 e.target === e.currentTarget 依然成立，都是Mask。this.dialogMouseDown 也依然爲true。結果不變，不關閉窗口

 四、思惟導圖