react提示框几秒_react 弹窗modal问题

最近写了一个react项目，关于react的modal实现有一些新的收获。

about vue

之前在vue里面实现弹窗是通过Vue.extend来实现弹窗的挂载，在需要弹窗的时候才把弹窗挂载在页面上，当弹窗需要被关闭的时候将弹窗组件从页面元素中卸载即可。这种实现方式，在页面有大量弹窗的时候非常方便，需要的时候才被加载，避免大量弹窗写在页面里面造成卡顿现象。

具体代码如下

about react

在写react的时候，也遇见了同样的情况。最开始 使用antd的modal，通过一个bool值来实现显示与否，写到后面，弹窗嵌套越来越多，层级也比较深。再通过布尔值就有点不太美观。于是寻找类似于vue的解决方案，最终在reactdom的方法中，找到了一个类似实现方法。

ReactDOM.unstable_renderSubtreeIntoContainer()这个方法类似于render方法，都是把组件挂载在页面上，但是不同于render挂载的位置是组件被引用的时候就确定的，这个方法可以自己指定挂载的位置即父组件。我看网上大多人使用这个方法是在modal组件生命钩子里面，来自己控制挂载与卸载，可是如果这样的话，好像跟我想要的方向有些差别，跟上面用布尔值好像没太大差。我把这个方法放在调用弹窗的父组件里面，当父组件对应的事件被触发，再将子组件挂载上去，这样弹窗的挂载与卸载都是在父组件里面控制的，当多层弹窗嵌套的时候，这样用起来非常方便。好啦，大致的代码如下

写到这里，感觉vue跟react的一些非公开的api还是相当好用的，如果有空的话，要多做了解！