react modal 各种实现思路总结

最近参与了 react 组件库的开发，做到我们常用的 modal 弹框的时候产生了一个疑问：实现方式有很多，有的要在已有的 dom 节点中保留一个挂载的位置，有的要每次弹窗关闭的时候都把挂载的节点也删除。在已经有的各种组件库中也用什么方法的都有。具体见这里

下面先大概捋一下实现的几种方法和使用场景，分别实现之后再评价他们各自的优缺点：

👉🏻使用场景：

1. 传统的 react 渲染过程，即组件树的形式
2. 在 已有的 html 中插入 modal 组件，通过 ReactDOM.render 挂载到 DOM

👉🏻实现方法：

1. 组件从一开始就挂载在页面结构中，通过传递 props 或者控制 state 来操作组件内部 css 来控制消失展示，包括直接传值和通过 refs 调用组件的方法（配合场景一）
2. 组件一开始就挂载在页面结构中，类似于 boron，通过 props 控制 state 来操作 render 时候的返回值来控制显隐（return (show ? <div> : null)）（配合场景一）
3. 组件一开始不在页面结构中，展示与否的状态父级自己维护，需要的时候再挂载组件。类似于react modal（配合场景一）
4. 组件初始化时未挂载，但是挂载的目的节点保留在 DOM 结构中，然后同上操作 render 的返回值控制显隐。（配合场景二）
5. 在 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