前言

本文是筆者寫組件設計的第六篇文章,內容依次從易到難,今天會用到react的高級API React Portals,它也是很多復雜組件必用的方法之一. 通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,并且在企業實際工作做游刃有余.

• 之所以會寫組件設計相關的文章,是因為作為一名前端優秀的前端工程師,面對各種繁瑣而重復的工作,我們不應該按部就班的去"辛勤勞動",而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.

作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗余代碼, 一切皆組件的思想深得人心. 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,并用原生框架的語法去實現各種常用組件的開發,希望能讓前端新手或者有一定工作經驗的朋友能有所收獲.

如果對于react/vue組件設計原理不熟悉的,可以參考我的之前寫的組件設計系列文章:

• 《精通react/vue組件設計》之5分鐘實現一個Tag(標簽)組件和Empty(空狀態)組件
• 《精通react/vue組件設計》之用純css打造類materialUI的按鈕點擊動畫并封裝成react組件
• 《精通react/vue組件設計》之快速實現一個可定制的進度條組件
• 《精通react/vue組件設計》之基于jsoneditor二次封裝一個可實時預覽的json編輯器組件(react版)

正文

在開始組件設計之前希望大家對css3和js有一定的基礎,并了解基本的react/vue語法.我們先看看實現后的組件效果:

1. 組件設計思路

按照之前筆者總結的組件設計原則,我們第一步是要確認需求. 一個抽屜(Drawer)組件會有如下需求點:

• 能控制抽屜是否可見
• 能手動配置抽屜的關閉按鈕
• 能控制抽屜的打開方向
• 關閉抽屜時是否銷毀里面的子元素(這個問題是工作中頻繁遇到的問題)
• 指定 Drawer 掛載的 HTML 節點, 可以將抽屜掛載在任何元素上
• 點擊蒙層可以控制是否允許關閉抽屜
• 能控制遮罩層的展示
• 能自定義抽屜彈出層樣式
• 可以設置抽屜彈出層寬度
• 能控制彈出層層級
• 能控制抽屜彈出方向(上下左右)
• 點擊關閉按鈕時能提供回調供開發者進行相關操作

需求收集好之后,作為一個有追求的程序員, 會得出如下線框圖:

對于react選手來說,如果沒用typescript,建議大家都用PropTypes, 它是react內置的類型檢測工具,我們可以直接在項目中導入. vue有自帶的屬性檢測方式,這里就不一一介紹了.

通過以上需求分析, 是不是覺得一個抽屜組件要實現這么多功能很復雜呢? 確實有點復雜,但是不要怕,有了上面精確的需求分析,我們只需要一步步按照功能點實現就好了.對于我們常用的table組件, modal組件等其實也需要考慮到很多使用場景和功能點, 比如antd的table組件暴露了幾十個屬性,如果不好好理清具體的需求, 實現這樣的組件是非常麻煩的.接下來我們就來看看具體實現.

2. 基于react實現一個Drawer組件

2.1. Drawer組件框架設計

首先我們先根據需求將組件框架寫好,這樣后面寫業務邏輯會更清晰:

1. import PropTypes from 'prop-types' 
2. import styles from './index.less' 
3.  
4. /** 
5.  * Drawer 抽屜組件 
6.  * @param {visible} bool 抽屜是否可見 
7.  * @param {closable} bool 是否顯示右上角的關閉按鈕 
8.  * @param {destroyOnClose} bool 關閉時銷毀里面的子元素 
9.  * @param {getContainer} HTMLElement 指定 Drawer 掛載的 HTML 節點, false 為掛載在當前 dom 
10.  * @param {maskClosable} bool 點擊蒙層是否允許關閉抽屜 
11.  * @param {mask} bool 是否展示遮罩 
12.  * @param {drawerStyle} object 用來設置抽屜彈出層樣式 
13.  * @param {width} number|string 彈出層寬度 
14.  * @param {zIndex} number 彈出層層級 
15.  * @param {placement} string 抽屜方向 
16.  * @param {onClose} string 點擊關閉時的回調 
17.  */ 
18. function Drawer(props) { 
19.   const {  
20.     closable = true,  
21.     destroyOnClose,  
22.     getContainer = document.body,  
23.     maskClosable = true,  
24.     mask = true,  
25.     drawerStyle,  
26.     width = '300px', 
27.     zIndex = 10, 
28.     placement = 'right',  
29.     onClose, 
30.     children 
31.   } = props 
32.  
33.   const childDom = ( 
34.     <div className={styles.xDrawerWrap}> 
35.       <div className={styles.xDrawerMask} ></div> 
36.       <div  
37.         className={styles.xDrawerContent}  
38.         { 
39.           children 
40.         } 
41.         { 
42.           !!closable && <span className={styles.xCloseBtn}>X</span> 
43.         } 
44.       </div> 
45.     </div> 
46.   ) 
47.   return childDom 
48. } 
49.  
50. export default Drawer 

有了這個框架,我們來一步步往里面實現內容吧.

2.2 實現visible, closable, onClose, mask, maskClosable, width, zIndex, drawerStyle

之所以要先實現這幾個功能,是因為他們實現都比較簡單,不會牽扯到其他復雜邏輯.只需要對外暴露屬性并使用屬性即可. 具體實現如下:

1. function Drawer(props) { 
2.   const {  
3.     closable = true,  
4.     destroyOnClose,  
5.     getContainer = document.body,  
6.     maskClosable = true,  
7.     mask = true,  
8.     drawerStyle,  
9.     width = '300px', 
10.     zIndex = 10, 
11.     placement = 'right',  
12.     onClose, 
13.     children 
14.   } = props 
15.  
16.   let [visible, setVisible] = useState(props.visible) 
17.  
18.   const handleClose = () => { 
19.     setVisible(false) 
20.     onClose && onClose() 
21.   } 
22.  
23.   useEffect(() => { 
24.     setVisible(props.visible) 
25.   }, [props.visible]) 
26.  
27.   const childDom = ( 
28.     <div  
29.       className={styles.xDrawerWrap}  
30.       style={{ 
31.         width: visible ? '100%' : '0', 
32.         zIndex 
33.       }} 
34.     > 
35.       { !!mask && <div className={styles.xDrawerMask} onClick={maskClosable ? handleClose : null}></div> } 
36.       <div  
37.         className={styles.xDrawerContent}  
38.         style={{ 
39.           width, 
40.           ...drawerStyle 
41.         }}> 
42.         { children } 
43.         { 
44.           !!closable && <span className={styles.xCloseBtn} onClick={handleClose}>X</span> 
45.         } 
46.       </div> 
47.     </div> 
48.   ) 
49.   return childDom 
50. } 

上述實現過程值得注意的就是我們組件設計采用了react hooks技術, 在這里用到了useState, useEffect, 如果大家不懂的可以去官網學習, 非常簡單,如果有不懂的可以和筆者交流或者在評論區提問. 抽屜動畫我們通過控制抽屜內容的寬度來實現,配合overflow:hidden, 后面我會單獨附上css代碼供大家參考.

2.3 實現destroyOnClose

destroyOnClose主要是用來清除組件緩存,比較常用的場景就是輸入文本,比如當我是的抽屜的內容是一個表單創建頁面時,我們關閉抽屜希望表單中用戶輸入的內容清空,保證下次進入時用戶能重新創建, 但是實際情況是如果我們不銷毀抽屜里的子組件, 子組件內容不會清空,用戶下次打開時開始之前的輸入,這明顯不合理. 如下圖所示:

要想清除緩存,首先就要要內部組件重新渲染,所以我們可以通過一個state來控制,如果用戶明確指定了關閉時要銷毀組件,那么我們就更新這個state,從而這個子元素也就不會有緩存了.具體實現如下:

1. function Drawer(props) { 
2.   // ... 
3.   let [isDesChild, setIsDesChild] = useState(false) 
4.  
5.   const handleClose = () => { 
6.     // ... 
7.     if(destroyOnClose) { 
8.       setIsDesChild(true) 
9.     } 
10.   } 
11.  
12.   useEffect(() => { 
13.     // ... 
14.     setIsDesChild(false) 
15.   }, [props.visible]) 
16.  
17.   const childDom = ( 
18.     <div className={styles.xDrawerWrap}> 
19.       <div className={styles.xDrawerContent}  
20.         { 
21.           isDesChild ? null : children 
22.         } 
23.       </div> 
24.     </div> 
25.   ) 
26.   return childDom 
27. } 

上述代碼中我們省略了部分不相關代碼, 主要來關注isDesChild和setIsDesChild, 這個屬性用來根據用戶傳入的destroyOnClose屬性倆判斷是否該更新這個state, 如果destroyOnClose為true,說明要更新,那么此時當用戶點擊關閉按鈕的時候, 組件將重新渲染, 在用戶再次點開抽屜時, 我們根據props.visible的變化,來重新讓子組件渲染出來,這樣就實現了組件卸載的完整流程.

原文地址：https://mp.weixin.qq.com/s/gbWUTtRTZGQI29wQkx07fA