React.lazy,React.suspense以及条件渲染

56 阅读1分钟

React.lazy:

有时候代码的初始打包体积很大,那么需要加载的时候就很长,React.lazy的作用就是可以进行代码切割减少初始打包体积,比如有很多弹窗,但是这些弹窗在只有在用户点击触发时才会显示,那么这种时候,弹窗的代码其实没必要放入初始的包中,放在其他包中等需要的时候再加载。

React.lazy 就可以实现这种效果, React.lazy使用动态 import() 把组件 拆成单独的 JS 文件 ,只有用到时才加载

什么时候是使用时?即什么时候是需要这个组件的? ❓❓❓❓

当然是组件被渲染时

React.suspense:

总结:

React.lazy和React.suspense只是减少了初始打包体积并没有真正实现想什么时候让组件加载就什么时候让组件加载 (即由开发者完全控制加载时机)

条件渲染:

真正可以让开发者实现什么时候去渲染

实现了当contractListModalVisible为true时组件渲染,对应的modal的js文件也被动态加载进来

可控!完美!

这些是我点击按钮后,为了渲染modal动态加载进来的js文件