只有不断学习和成长，才能适应这个快速变化的世界。
1. 懒加载
1.1 React 懒加载
React 中懒加载 Lazy 与 Suspense 需要搭配使用。
React.lazy 定义：
React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。
为什么代码要分割？
当你的程序越来越大，代码量越来越多。一个页面上堆积了很多功能，也许有些功能很可能都用不到，但是一样下载加载到页面上，所以这里面肯定有优化空间。就如图片懒加载的理论。
实现原理？
当 webpack 解析到该语法时，它会自动地开始进行代码分割（Code Splitting），分割成一个文件，当使用到这个文件的时候这段代码才会被异步加载。
解决方案？文章来源：https://www.toymoban.com/news/detail-748275.html
在 React.1azy 和常用的三方包 react-1oadab1e（路由懒加载），都是使用了这个原理，然后配合 webpack 进行代码打包拆分达到异步加载，这样首屏渲染的速度将大大的提高。由于 React.1azy 不支持服务端渲染，所以这时候 react-1oadable 就是不错的选择。文章来源地址https://www.toymoban.com/news/detail-748275.html
1.2 Lazy 和 Suspense 使用
// 当使用到的时候才进行导入
const NewComponent = React.lazy(()=>import('./component/NewComponent'))
<Suspense fallback={<div>正在加载中</div>}>
<NewComponent></NewComponent>
<Suspense>
1.3 第三方库 react-loadab1e 使用
到了这里，关于React 组件懒加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
