在React 16.6中使用组件的懒加载

原文信息: 查看原文查看原文

Lazy-loading components in React 16.6

- Glad Chinda

在React 16.6之前的版本中,要想实现React项目的代码分割和组件的懒加载,需要借助于ES6、Babel和Webpack或Browserify等工具来做代码分割,或者使用Webpack、react-loadable插件来实现组件的懒加载。

现在,从React 16.6版本开始,不需要借助外部工具,就可以实现组件的懒加载,这里要介绍16.6版本中新引入的两个特性:React.lazy() React.Suspense

React.lazy() 使得创建一个动态import且懒加载的组件非常容易,使得组件真正需要渲染的时候才会被引入。它将一个函数当做参数,这个函数必须返回一个通过import加载组件的Promise对象。下图是示例。


React.Suspense 是一个高阶组件,它用来包裹着由React.lazy() 创建的组件,且可以将多个不同层次级别的React.lazy()组件包裹在一个Suspense组件内。而且,Suspense组件还有一个fallback属性接受一个React元素,用来作为懒加载组件被加载过程中的占位符(比如:loading提示)。示例见下图。


作者在文中,通过一个简单的示例,很清楚地讲解了如何使用React.lazy()和React.Suspense来创建基于React-Router的多路由懒加载组件。代码如下图。


希望这篇文章能够给你启发,让你更好地理解React.lazy() 和React.Suspense,要使用这些新特性,就赶紧将你的React版本更新到16.6吧。

分享于 2018-10-31

访问量 4178

预览图片