摘要：本文是造輪系列第二篇。實現(xiàn)方式事件處理跟差不多，唯一多了一步就是當(dāng)點擊或者的時候，如果外部有回調(diào)就需要調(diào)用對應(yīng)的回調(diào)函數(shù)。

本文是React造輪系列第二篇。

1.React 造輪子系列：Icon 組件思路

本輪子是通過 React + TypeScript + Webpack 搭建的，至于環(huán)境的搭建這邊就不在細說了，自己動手谷歌吧。當(dāng)然可以參考我的源碼。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

對話框一般是我們點擊按鈕彈出的這么一個東西，主要類型有 Alter, Confirm 及 Modal, Modal 一般帶有半透明的黑色背景。當(dāng)然外觀可參考 AntD 或者 Framework 等。

API 方面主要還是要參考同行，因為如果有一天，別人想你用的UI框架時，你的 API 跟他之前常用的又不用，這樣就加大了入門門檻，所以API 盡量保持跟現(xiàn)有的差不多。

對話框除了提供顯示屬性外，還要有點擊確認后的回放函數(shù)，如：

alert("你好").then(fn)
confirm("確定？").then(fn)
modal(組件名)

Dialog 源碼已經(jīng)上傳到這里。

dialog/dialog.example.tsx, 這里 state ，生命周期使用 React 16.8 新出的 Hook，如果對 Hook 不熟悉可以先看官網(wǎng)文檔。

dialog/dialog.example.tsx

import React, {useState} from "react"
import Dialog from "./dialog"
export default function () {
  const [x, setX] = useState(false)
  return (
    

       {setX(!x)}}>點擊
      

    
  )
}

dialog/dialog.tsx

import React from "react"

interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent = (props) => {
  return (
    props.visible ? 
      
dialog
 : 
      null
  )
}

export default Dialog

運行效果

上述還有問題，我們 dialog 在組件內(nèi)是寫死的，我們想的是直接通過組件內(nèi)包裹的內(nèi)容，如：

// dialog/dialog.example.tsx
...

  hi

...

這樣寫，頁面上是不會顯示 hi 的，這里 children 屬性就派上用場了，我們需要在 dialog 組件中進一步驟修改如下內(nèi)容：

// dialog/dialog.tsx
...
return (
    props.visible ? 
      

        {props.children}
      
      : 
      null
)
...

通常對話框會有一層遮罩，通常我們大都會這樣寫：

// dialog/dialog.tsx
...
props.visible ? 
  

    

    {props.children}
    
  
  : 
  null
...

這種結(jié)構(gòu)有個不好的地方就是點擊遮罩層的時候要關(guān)閉對話框，如果是用這種結(jié)構(gòu)，用戶點擊任何 div,都相當(dāng)于點擊遮罩層,所以最好要分開：

// dialog/dialog.tsx
...

    

    
    

      {props.children}
    
 
...

由于 React 要求最外層只能有一個元素, 所以我們多用了一個 div 包裹起來，但是這種方法無形之中多了個 div，所以可以使用 React 16 之后新出的 Fragment, Fragment 跟 vue 中的 template 一樣，它是不會渲染到頁面的。

import React, {Fragment} from "react"
import "./dialog.scss";
interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent = (props) => {
  return (
    props.visible ? 
     
        

        
        

          {props.children}
        
     
      : 
      null
  )
}

export default Dialog

這里不多說，直接上代碼

import React, {Fragment} from "react"
import "./dialog.scss";
import {Icon} from "../index"
interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent = (props) => {
  return (
    props.visible ? 
      
          

          
          

            

              
            
            
提示
            

              {props.children}
            
            
          
      
      : 
      null
  )
}

export default Dialog

從上述代碼我們可以發(fā)現(xiàn)我們寫樣式的名字時候，為了不被第三使用覆蓋，我們自定義了一個 fui-dialog前綴，在寫每個樣式名稱時，都要寫一遍，這樣顯然不太合理，萬一哪天我不用這個前綴時候，每個都要改一遍，所以我們需要一個方法來封裝。

咱們可能會寫這樣方法：

function scopedClass(name) {
  return `fui-dialog-${name}`
}

這樣寫不行，因為我們 name 可能不傳，這樣就會多出一個 -,所以需要進一步的判斷：

function scopedClass(name) {

  return `fui-dialog-${name ? "-" + name : ""}`
}

那還有沒有更簡潔的方法，使用 filter 方法：

function scopedClass(name ?: string) {
  return ["fui-dialog", name].filter(Boolean).join("-")
}

調(diào)用方式如下：

  ....
  
      

      
      

        

          
        
        
提示
        

          {props.children}
        
        
      
  
 ...

大家在想法，這樣寫是有問題，每個組件都寫一個函數(shù)嗎，如果 Icon 組件，我還需要寫一個 fui-icon, 解決方法是把 前綴當(dāng)一個參數(shù)，如：

function scopedClass(name ?: string) {
  return ["fui-dialog", name].filter(Boolean).join("-")
}

調(diào)用方式如下：

className={scopedClass("fui-dialog", "mask")}

這樣寫，還不如直接寫樣式，這種方式是等于白寫了一個方法，那怎么辦？這就需要高階函數(shù)出場了。實現(xiàn)如下：

function scopeClassMaker(prefix: string) {
  return function (name ?: string) {
    return [prefix, name].filter(Boolean).join("-")
  }
}

const scopedClass = scopeClassMaker("fui-dialog")

scopeClassMaker 函數(shù)是高級函數(shù)，返回一個帶了 prefix 參數(shù)的函數(shù)。

在寫事件處理之前，我們 Dialog 需要接收一個 buttons 屬性，就是顯示的操作按鈕并添加事件：

// dialog/dialog.example.tsx
...
 {setX(false)}}>1,
     {setX(false)}}>2,
  ]
}>
  
hi

...

咱們看到這個，第一反應(yīng)應(yīng)該是覺得這樣寫很麻煩，我寫個 dialog， visible要自己，按鈕要自己，連事件也要自己寫。請接受這種設(shè)定。雖然麻煩，但非常的好理解。這跟 Vue 的理念是不太一樣的。當(dāng)然后面會進一步驟優(yōu)化。

組件內(nèi)渲染如下：

運行起來你會發(fā)現(xiàn)有個警告：

主要是說我們渲染數(shù)組時，需要加個 key,解決方法有兩種，就是不要使用數(shù)組方式,當(dāng)然這不治本，所以這里 React.cloneElemen 出場了，它可以克隆元素并添加對應(yīng)的屬性值，如下：

{
  props.buttons.map((button, index) => {
    React.cloneElement(button, {key: index})
  })
}

對應(yīng)的點擊關(guān)閉事件相對容易這邊就不講了，可以自行查看源碼。

接下來來看一個樣式的問題，首先先給出我們遮罩的樣式：

.fui-dialog {
  position: fixed; background: white; min-width: 20em;
  z-index: 2;
  border-radius: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%);
  &-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: fade_out(black, 0.5);
    z-index: 1;
  }
  .... 以下省略其它樣式
}

我們遮罩 .fui-dialog-mask 使用 fixed 定位感覺是沒問題的，那如果在調(diào)用 dialog 同級在加以下這么元素：

666
   
 {setX(!x)}}>點擊

...

運行效果：

發(fā)現(xiàn)遮罩并沒有遮住 666 的內(nèi)容。這是為什么？

看結(jié)構(gòu)也很好理解，遮罩元素與 666 是同級結(jié)構(gòu)，且層級比 666 低，當(dāng)然是覆蓋不了的。那咱們可能就會這樣做，給.fui-dialog-mask設(shè)置一個 zIndex 比它大的唄，如 9999。

效果：

恩，感覺沒問題，這時我們在 Dialog 組件在嵌套一層 zIndex 為 9 的呢，如：

  

    ...
  

運行效果如下：

發(fā)現(xiàn)，父元素被壓住了，里面元素 zIndex 值如何的高，都沒有效果。

那這要怎么破？答案是不要讓它出現(xiàn)在任何元素的里面，這怎么可能呢。這里就需要引出一個神奇的 API了。這個 API 叫做 傳送門(portal)。

用法如下：

return ReactDOM.createPortal(
  this.props.children,
  domNode
);

第一個參數(shù)就是你的 div，第二個參數(shù)就是你要去的地方。

import React, {Fragment, ReactElement} from "react"
import ReactDOM from "react-dom"
import "./dialog.scss";
import {Icon} from "../index"
import {scopedClassMaker} from "../classes"

interface Props {
  visible: boolean,
  buttons: Array,
  onClose: React.MouseEventHandler,
  closeOnClickMask?: boolean
}

const scopedClass = scopedClassMaker("fui-dialog")
const sc = scopedClass

const Dialog: React.FunctionComponent = (props) => {

  const onClickClose: React.MouseEventHandler = (e) => {
    props.onClose(e)
  }
  const onClickMask: React.MouseEventHandler = (e) => {
    if (props.closeOnClickMask) {
      props.onClose(e)
    }
  }
  const x = props.visible ? 
  
      

      
      

        

          
        
        
提示
        

          {props.children}
        
        
      
  
  : 
  null
  return (
    ReactDOM.createPortal(x, document.body)
  )
}

Dialog.defaultProps = {
  closeOnClickMask: false
}


export default Dialog

運行效果：

當(dāng)然這樣，如果 Dialog 層級比同級的 zIndex 小的話，還是覆蓋不了。 那 zIndex 一般設(shè)置成多少比較合理。一般 Dialog 這層設(shè)置成 1, mask 這層設(shè)置成2。定的越小越好，因為用戶可以去改。

zIndex 管理一般就是前端架構(gòu)師要做的了，根據(jù)業(yè)務(wù)產(chǎn)景來劃分，如廣告肯定是要在頁面最上面，所以 zIndex 一般是屬于最高級的。

上述我們使用 Dialog 組件調(diào)用方式比較麻煩，寫了一堆，有時候我們想到使用 alert 直接彈出一個對話框這樣簡單方便。如

  
example 3
   alert("1")}>alert

我們想直接點擊 button ，然后彈出我們自定義的對話框內(nèi)容為1 ，需要在 Dialog 組件內(nèi)我們需要導(dǎo)出一個 alert 方法，如下：

// dialog/dialog.tsx
...
const alert = (content: string) => {
  const component = 
 {}}>
    {content}
  
  const div = document.createElement("div")
  document.body.append(div)
  ReactDOM.render(component, div)
}

export {alert}
...

運行效果：

但有個問題，因為對話框的 visible 是由外部傳入的，且 React 是單向數(shù)據(jù)流的，在組件內(nèi)并不能直接修改 visible，所以在 onClose 方法我們需要再次渲染一個新的組件,并設(shè)置新組件 visible 為 ture,覆蓋原來的組件：

...
const alert = (content: string) => {
  const component = 
 {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
  }}>
    {content}
  
  const div = document.createElement("div")
  document.body.append(div)
  ReactDOM.render(component, div)
}
..

confirm 調(diào)用方式：

 confirm("1", ()=>{}, ()=> {})}>confirm

第一個參數(shù)是顯示的內(nèi)容，每二個參數(shù)是確認的回調(diào)，第三個參數(shù)是取消的回調(diào)函數(shù)。

實現(xiàn)方式：

const confirm = (content: string, yes?: () => void, no?: () => void) => {
  const onYes = () => {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
    yes && yes()
  }
  const onNo = () => {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
    no && no()
  }
  const component = (
  
 { onNo()}}
    buttons={[yes, 
              no
            ]}
  >
    {content}
  
)
  const div = document.createElement("div")
  document.body.appendChild(div)
  ReactDOM.render(component, div)
}

事件處理跟 Alter 差不多，唯一多了一步就是 confirm 當(dāng)點擊 yes 或者 no 的時候，如果外部有回調(diào)就需要調(diào)用對應(yīng)的回調(diào)函數(shù)。

modal 調(diào)用方式：

 {modal(
你好
)}}>modal

modal 對應(yīng)傳遞的內(nèi)容就不是單單的文本了，而是元素。

實現(xiàn)方式：

const modal = (content: ReactNode | ReactFragment) => {
  const onClose = () => {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
  }
  const component = 

    {content}
  
  const div = document.createElement("div")
  document.body.appendChild(div)
  ReactDOM.render(component, div)
}

注意，這邊的 content 類型。

運行效果：

這還有個問題，如果需要加按鈕呢，可能會這樣寫：

  {modal(

     你好 close 
  )}}>modal

這樣是關(guān)不了的，因為 Dialog 是封裝在 modal 里面的。如果要關(guān)，必須控制 visible,那很顯然我從外面控制不了里面的 visible,所以這個 button 沒有辦法把這個 modal 關(guān)掉。

解決方法就是使用閉包，我們可以在 modal 方法里面把 close 方法返回：

const modal = (content: ReactNode | ReactFragment) => {
  const onClose = () => {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
  }
  const component = 

    {content}
  
  const div = document.createElement("div")
  document.body.appendChild(div)
  ReactDOM.render(component, div)
  return onClose;
}

最后多了一個 retrun onClose,由于閉包的作用，外部調(diào)用返回的 onClose 方法可以訪問到內(nèi)部變量。

調(diào)用方式：

const openModal = () => {
  const close = modal(
你好
     close()}>close
  
)
}
modal

在重構(gòu)之前，我們先要抽象 alert, confirm, modal 中各自的方法：

從表格可以看出，modal 與其它兩個只多了一個 retrun api,其實其它兩個也可以返回對應(yīng)的 Api，只是我們沒去調(diào)用而已，所以補上：

這樣一來，這三個函數(shù)從抽象層面上來看是類似的，所以這三個函數(shù)應(yīng)該合成一個。

首先抽取公共部分，先取名為x ,內(nèi)容如下：

const x= (content: ReactNode, buttons ?:Array, afterClose?: () => void) => {
  const close = () => {
    ReactDOM.render(React.cloneElement(component, {visible: false}), div)
    ReactDOM.unmountComponentAtNode(div)
    div.remove()
    afterClose && afterClose()
  }
  const component = 
  
 {
      close(); afterClose && afterClose()
    }}
    buttons={buttons}
  >
    {content}
  
  const div = document.createElement("div")
  document.body.append(div)
  ReactDOM.render(component, div)
  return close
}

alert 重構(gòu)后的代碼如下：

const alert = (content: string) => {
  const button =  close()}>ok
  const close = x(content, [button])
}

confirm 重構(gòu)后的代碼如下：

const confirm = (content: string, yes?: () => void, no?: () => void) => {

  const onYes = () => {
    close()
    yes && yes()
  }
  const onNo = () => {
    close()
    no && no()
  }
  const buttons = [
    yes, 
    no
  ]
  const close =  modal(content, buttons, no)
}

modal 重構(gòu)后的代碼如下：

const modal = (content: ReactNode | ReactFragment) => {
  return x(content)
}

最后發(fā)現(xiàn)其實 x 方法就是 modal 方法，所以更改 x 名為 modal,刪除對應(yīng)的 modal 定義。

scopedClass 高階函數(shù)的使用

傳送門 portal

動態(tài)生成組件

閉包傳 API

本組件為使用優(yōu)化樣式，如果有興趣可以自行優(yōu)化，本節(jié)源碼已經(jīng)上傳至這里中的lib/dialog。

方應(yīng)杭老師的React造輪子課程

你的點贊是我持續(xù)分享好東西的動力，歡迎點贊！