最近参与了 react 组件库的开发，做到我们常用的 modal 弹框的时候产生了一个疑问：实现方式有很多，有的要在已有的 dom 节点中保留一个挂载的位置，有的要每次弹窗关闭的时候都把挂载的节点也删除。在已经有的各种组件库中也用什么方法的都有。具体见这里
下面先大概捋一下实现的几种方法和使用场景，分别实现之后再评价他们各自的优缺点：
👉🏻使用场景：
- 传统的 react 渲染过程，即组件树的形式
- 在 已有的 html 中插入 modal 组件，通过 ReactDOM.render 挂载到 DOM
👉🏻实现方法：
- 组件从一开始就挂载在页面结构中，通过传递 props 或者控制 state 来操作组件内部 css 来控制消失展示，包括直接传值和通过
refs调用组件的方法（配合场景一） - 组件一开始就挂载在页面结构中，类似于 boron，通过 props 控制 state 来操作
render时候的返回值来控制显隐（return (show ? <div> : null)）（配合场景一） - 组件一开始不在页面结构中，展示与否的状态父级自己维护，需要的时候再挂载组件。类似于react modal（配合场景一）
- 组件初始化时未挂载，但是挂载的目的节点保留在 DOM 结构中，然后同上操作 render 的返回值控制显隐。（配合场景二）
- 在 modal 展示结束之后删除挂载的节点，类似于react bootstrap中的 modal。这也意味着在弹出节点的时候我们需要创建新的节点供其挂载。可以通过在
render方法外再封装一个方法实现。（可以考虑把这个提出成一个公共的方法，类似于createMountDiv这种意思，因为很多组件都有类似的问题，比如 alert 等）（配合场景二）
👉🏻总结
- 1，2 ，3三种方式都需要接收父级的参数，意味着你的组件得嵌套到内部，这样样式上不太好控制（就像我们为什么平时建议把 modal 写到贴近 body 的位置）；而且多个弹框的位置不能公用组件，而是在每一个要用的地方都会创建
- 方法4可以可以控制挂载组件的位置在外层，并且可以只渲染在一个位置，但是会一直有一个冗余的节点在结构中。
- 方法5和方法4差不多，并且没有结构上的冗余。但是缺点是每一次弹框都要创建新的节点，有影响页面展示的风险。并且在动画的实现上有点麻烦
具体怎么选择需要结合业务的使用场景来决定。
_
参考文章：
https://segmentfault.com/q/1010000004915729
https://reactjsnews.com/modals-in-react?utm_source=wechat_timeline&utm_medium=social&from=timeline
