一 前言

本章节，我们一起来设计一个自定义的弹窗组件，会包含如下知识点：

• 弹窗组件设计；
• ReactDOM.createPortal 使用；
• 组件静态方法使用；
• 不依赖父组件实现挂载/卸载组件。

二 设计思路

1 建立目标

要实现的具体功能下：

编写的自定义 Modal 可以通过两种方式调用：

• 第一种通过挂载组件方式，动态设置 visible 属性。

<Modal  title={'《React进阶实践指南》'}  visible={visible}  >
    <div> hello,world </div>
</Modal>

• 第二种通过 Modal 静态属性方法，控制 Modal 的显示/隐藏。

 Modal.show({ /* 自定义弹窗的显示 */
    content:<p>确定购买《React进阶指南小册》吗</p>,
    title:'《React进阶实践指南》',
    onOk:()=>console.log('点击确定'),
    onCancel:()=>console.log('点击取消'),
    onClose:()=> Modal.hidden() /* 自定义弹窗的隐藏 */
})

如上，Modal.show 控制自定义弹窗的显示，可以通过 Modal.hidden 控制弹窗的隐藏，业务层不需要挂载组件。

其他要求：

• 自定义弹窗要有渐变的动画效果。

2 设计思路

1 props的设定

实现的 Modal 组件需要 props 配置项如下。

2 组件之外渲染

需要把弹窗组件渲染到挂载的容器之外，这样不受到父组件的影响。这里可以通过 ReactDOM.createPortal API解决这个问题。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。createPortal 可以把当前组件或 element 元素的子节点，渲染到组件之外的其他地方。

createPortal 接受两个参数：

ReactDOM.createPortal(child, container)

• 第一个： child 是任何可渲染的 React Element元素。
• 第二个： container 是一个 DOM 元素。

3 不依赖父组件实现挂载/卸载组件

挂载组件

一个 React 应用，可以有多个 root Fiber， 所以可以通过 ReactDOM.render 来实现组件的自由挂载。

卸载组件

上面既然完成了挂载组件，下面需要在隐藏 Modal 的时候去卸载组件。 可以通过 ReactDOM.unmountComponentAtNode 来实现这个功能。

unmountComponentAtNode 从 DOM 中卸载组件，会将其事件处理器和 state 一并清除。 如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回 true ，如果没有组件可被移除将会返回 false 。

三 代码实现

1 组件层面

Modal——分配 props ，渲染视图

import Dialog from './dialog'

class Modal extends React.PureComponent{
    /* 渲染底部按钮 */
    renderFooter=()=>{
        const { onOk , onCancel , cancelText , okText, footer  } = this.props
        /* 触发 onOk / onCancel 回调  */
        if(footer && React.isValidElement(footer)) return footer
        return <div className="model_bottom" >
            <div className="model_btn_box" >
                <button className="searchbtn"  onClick={(e)=>{ onOk && onOk(e) }} >{okText || '确定'}</button>
                <button className="concellbtn" onClick={(e)=>{ onCancel && onCancel(e) }} >{cancelText || '取消'}</button>
            </div>
        </div>
    }

    /* 渲染顶部 */
    renderTop=()=>{
        const { title , onClose  } = this.props
        return <div className="model_top" >
            <p>{title}</p>
            <span className="model_top_close"  onClick={()=> onClose && onClose()} >x</span>
        </div>
    }

    /* 渲染弹窗内容 */
    renderContent=()=>{
        const { content , children } = this.props
        return  React.isValidElement(content) ? content
                : children ? children : null
    }
    render(){
        const { visible, width = 500 ,closeCb , onClose  } = this.props
        return <Dialog
            closeCb={closeCb}
            onClose={onClose}
            visible={visible}
            width={width}
               >
           {this.renderTop()}
           {this.renderContent()}
           {this.renderFooter()}
     </Dialog>
    }
}

设计思路：

• Modal 组件的设计实际很简单，就是接收上述的 props 配置，然后分配给 Top， Foot， Content 等每个部分。
• 这里通过 Dialog 组件，来实现 Modal 的动态显示/隐藏，增加动画效果。
• 绑定确定 onOk ，取消 onCancel ，关闭 onClose 等回调函数。
• 通过 PureComponent 做性能优化。

Dialog——控制显示隐藏

import React , { useMemo , useEffect ,useState  } from 'react'
import ReactDOM from 'react-dom'

 /* 控制弹窗隐藏以及动画效果 */
 const controlShow = (f1,f2,value,timer)=> {
    f1(value)
    return  setTimeout(()=>{
        f2(value)
    },timer)
}
export default function Dialog(props){
    const { width , visible , closeCb , onClose  } = props
    /* 控制 modelShow 动画效果 */
    const [ modelShow , setModelShow ] = useState(visible)
    const [ modelShowAync , setModelShowAync ] = useState(visible)
    const renderChildren = useMemo(()=>{
        /* 把元素渲染到组件之外的 document.body 上  */
        return ReactDOM.createPortal(
          <div style={{ display:modelShow ? 'block' : 'none'  }} >
              <div className="model_container" style={{ opacity:modelShowAync ? 1 : 0  }}  >
                <div className="model_wrap" >
                    <div  style={{ width:width + 'px'}}  > {props.children} </div>
                </div>
              </div>
              <div  className="model_container mast"  onClick={()=> onClose && onClose()} style={{ opacity:modelShowAync ? 0.6 : 0  }}  />
          </div>,
          document.body
         )
    },[ modelShowAync, modelShow ])
    useEffect(()=>{
        let timer
        if(visible){
            /* 打开弹窗，需要先让 */
           timer = controlShow(setModelShow,setModelShowAync,visible,30)
        }else{
           timer = controlShow(setModelShowAync,setModelShow,visible,1000)
        }
        return function (){
            timer && clearTimeout(timer)
        }
    },[ visible ])
    /* 执行关闭弹窗后的回调函数 closeCb */
    useEffect(()=>{
        !modelShow && typeof closeCb  === 'function' && closeCb()
    },[ modelShow ])
    return renderChildren

设计思路：

需要把元素渲染到组件之外，用 createPortal 把元素直接渲染到 document.body 下，为了防止函数组件每一次执行都触发 createPortal， 所以通过 useMemo 做性能优化。

因为需要渐变的动画效果，所以需要两个变量 modelShow / modelShowAync 来控制显示/隐藏，modelShow 让元素显示/隐藏，modelShowAync 控制动画执行。

• 当弹窗要显示的时候，要先设置 modelShow 让组件显示，然后用 setTimeout 调度让 modelShowAync 触发执行动画。
• 当弹窗要隐藏的时候，需要先让动画执行，所以先控制 modelShowAync ，然后通过控制 modelShow 元素隐藏，和上述流程相反。
• 用一个控制器 controlShow 来流畅执行更新任务。

2 静态属性方法

对于通过组件的静态方法来实现弹窗的显示与隐藏，流程在上述基础上，要更复杂有一些。

let ModalContainer = null
const modelSysbol = Symbol('$$__model__Container_hidden')

/* 静态属性show——控制 */
Modal.show = function(config){
    /* 如果modal已经存在了，那么就不需要第二次show */
   if(ModalContainer) return
   const props = { ...config , visible: true }
   const container = ModalContainer =  document.createElement('div')
   /* 创建一个管理者，管理moal状态 */
   const manager =  container[modelSysbol] = {
       setShow:null,
       mounted:false,
       hidden(){
          const { setShow } = manager
          setShow && setShow(false)
       },
       destory(){
           /* 卸载组件 */
           ReactDOM.unmountComponentAtNode(container)
          /* 移除节点 */
          document.body.removeChild(container)
          /* 置空元素 */
          ModalContainer = null
       }
   }
   const ModelApp = (props) => {
       const [ show , setShow ] = useState(false)
       manager.setShow = setShow
       const { visible,...trueProps } = props
       useEffect(()=>{
           /* 加载完成，设置状态 */
           manager.mounted = true
           setShow(visible)
        },[])
       return <Modal  {...trueProps} closeCb={() => manager.mounted &&  manager.destory()}  visible={show}  />
   }
   /* 插入到body中 */
   document.body.appendChild(container)
   /* 渲染React元素 */
   ReactDOM.render(<ModelApp  {...props}  />,container)
   return manager
}

/* 静态属性——hidden控制隐藏 */
Modal.hidden = function(){
   if(!ModalContainer) return
   /* 如果存在 ModalContainer 那么隐藏 ModalContainer  */
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden()
}

export default Modal

接下来，描述一下流程和细节：

• 第一点：因为要通过调用 Modal 的静态属性来实现组件的显示与隐藏。所以用 Modal.show 来控制显示，Modal.hidden来控制隐藏。但是两者要建立起关联，所以通过全局ModalContainer属性，能够隐藏掉Modal.show 产生的元素与组件。

• 第二点：如果调用 Modal.show，首先会创建一个元素容器 container ，用来挂载 Modal 组件，通过 ReactDOM.render 挂载，这里需要把 contianer 插入到 document.body 上。

• 第三点：因为 Modal 组件要动态混入 visible 属性，并且做一些初始化的工作，比如提供隐藏弹窗的方法，所以创建一个 ModelApp 容器组件包裹 Modal。

• 第四点：因为要在弹窗消失的动画执行后，再统一卸载组件和元素，所以到了本模块难点，就是创建一个 modal manager 管理者，通过 Symbol('$$__model__Container_hidden') 把管理者和容器之间建立起关联。容器下有 hidden 只是隐藏组件，并没有销毁组件，当组件隐藏动画执行完毕，会执行 closeCb 回调函数，在回调函数中再统一卸载元素和组件。

• 第五点：调用Modal.hidden 本质上调用的是 manager 上的 hidden 方法 ，然后执行动画，执行隐藏元素。然后再触发 destory ，用 unmountComponentAtNode 和 removeChild 做一些收尾工作。完成整个流程。

创建弹窗流程图：

关闭弹窗流程图：

四 验证环节

验证第一种——通过挂载组件方式

/* 挂载方式调用modal */
export default function Index() {
    const [ visible , setVisible ] = useState(false)
    const [ nameShow , setNameShow ] = useState(false)
    const handleClick = () => {
        console.log('点击')
        setVisible(!visible)
        setNameShow(!nameShow)
    }
    /* 防止 Model 的 PureComponent 失去作用 */
    const [ handleClose ,handleOk, handleCancel ] = useMemo(()=>{
        const Ok = () =>  console.log('点击确定按钮')
        const Close = () => setVisible(false)
        const Cancel = () => console.log('点击取消按钮')
        return [ Close , Ok , Cancel  ]
    },[])

    return <div>
        <Modal
            onCancel={handleCancel}
            onClose={handleClose}
            onOk={handleOk}
            title={'《React进阶实践指南》'}
            visible={visible}
            width={700}
        >
           <div className="feel" >
              小册阅读感受： <input placeholder="写下你的感受" />
              {nameShow && <p>作者： 我不是外星人</p>}
           </div>
        </Modal>
        <button onClick={() => {
            setVisible(!visible)
            setNameShow(false)
        }}
        > model show </button>
        <button onClick={handleClick} > model show ( 显示作者 ) </button>
    </div>
}

• 如上就是挂载的方式使用 Modal，注意 Modal 用的是 PureComponent ，父组件是函数组件在给 PureComponent 绑定方法的时候 ，要用 useMemo 或 useCallback 处理。

效果：

验证第二种——通过静态属性方式

export default function Index(){
    const handleClick =() => {
        Modal.show({
            content:<p>确定购买《React进阶指南小册》吗</p>,
            title:'《React进阶实践指南》',
            onOk:()=>console.log('点击确定'),
            onCancel:()=>console.log('点击取消'),
            onClose:()=> Modal.hidden()
        })
    }
    return <div>
        <button onClick={() => handleClick()} >静态方式调用，显示modal</button>
    </div>
}

• 这种方式用起来比上一种要简单。流程我就不细说了。

效果：

五 总结

本章节的知识点总结：

• 自定义弹窗组件的编写——挂载组件/调用静态属性两种方式。
• ReactDOM.createPortal 使用。
• ReactDOM.unmountComponentAtNode 和 ReactDOM.render 实现自由挂载/卸载组件。
• hooks 的使用与性能优化。