最近写了一个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还是相当好用的,如果有空的话,要多做了解!