一、React.lazyload
React.lazy是一个能够让你动态导入组件的函数。 这要求你的React代码是基于ES6的，且支持动态import()。
React.lazy实质上是React官方使用Suspense配合lazy实现的惰性加载组件功能，这个优化可以使应用整体体积变小，加载速度更快，用户可以更快地看到应用的内容。使用了React.lazy的技术后，可以让应用的首屏加载速度更快一点，优化用户体验。而且，当你的组件属于懒加载的时候，你也不需要再自己维护加载状态和错误状态（个别情况还是需要，这个后面会讲）。
使用React.lazy和Suspense还有一个需要注意的地方，就是由于LazyComponents是异步的，所以它们自有的Render函数的作用域是异步的，所以如果你想在LazyComponents之间共享一些状态，并在同步方式下渲染，你需要共享这些状态的作用域一样是异步的。
二、React.lazyload加载成功怎么知道
我们知道，React.lazy的作用是可以在需要的时候才会导入依赖的组件，虽然这种方式确实可以减轻打包后的文件大小，但是这样在加载完成之前，页面上就先出现了全白的页面，不是太好的体验。
React.lazy和React.Suspense是React V16.6中推出的新特性，当组件正在加载的时候，我们可以使用fallback的方式做出一些特殊的显示，告诉用户正在加载中，等后端返回数据之后，组件才会render出来。
“`
import React, { lazy, Suspense } from ‘react’;
const LazyComponent = lazy(() => import(‘./MyComponent’));
const App = () => (
<Suspense fallback={Loading…
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/258537.html
微信扫一扫 
支付宝扫一扫 