踩坑记录——React.lazy

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了踩坑记录——React.lazy相关的知识,希望对你有一定的参考价值。

参考技术A 项目背景:一个页面内嵌三个页面组件,试图使用React.lazy懒加载实现分包加载性能优化,
原本使用的是alias export,引入失败。
经查官方文档和mentor讲解,用lazy懒加载的组件必须使用default export导出
React.lazy官方文档

可是就止步于此了吗,如果我就想用alias export导出该怎么办呢?

从上图可以看出,import('')方法返回的是一个Promise,于是

经检验和实际预览效果,骗过了React.lazy。
不过这种方法只是技术层面的尝试,写法过于复杂,还是老老实实用export default吧

ps: 记得添加suspense和fallback机制,让分包加载的时候显示loading的状态

react懒加载(lazy, Suspense)

文章目录

一、参考

  1. react官方文档 —— React.lazy
  2. 自定义 React懒加载组件、全局定义方法(组件、变量)

二、API 介绍

2.1 React.lazy()

  1. React.lazy 接受一个函数,这个函数需要动态调用 import()。

  2. 它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。

使用之前:

import OtherComponent from './OtherComponent';

使用之后:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

2.2 <Suspense> 组件

  1. React.lazy() 加载的组件只能在 组件中渲染

    目的:使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。

  2. fallback 属性

    接受任何在组件加载过程中你想展示的 React 元素。即在加载异步组件显示之前先显示的内容

三、案例

3.1 配合路由使用

import React,  Component,lazy,Suspense from 'react'
import NavLink,Route from 'react-router-dom'

// import Home from './Home'
// import About from './About'

import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))

export default class Demo extends Component 
	render() 
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							/* 在React中靠路由链接实现切换组件--编写路由链接 */
							<NavLink className="list-group-item" to="/about">About</NavLink>
							<NavLink className="list-group-item" to="/home">Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback=<Loading/>>
									/* 注册路由 */
									<Route path="/about" component=About/>
									<Route path="/home" component=Home/>
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	

3.2 官方例子

import React,  Suspense  from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() 
  return (
    <div>
      <Suspense fallback=<div>Loading...</div>>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );

四、注意

React.lazy 和 Suspense 技术还不支持服务端渲染。

以上是关于踩坑记录——React.lazy的主要内容,如果未能解决你的问题,请参考以下文章

ios 踩坑记录

python踩坑记录

Qt QCustomPlot 踩坑记录

Qt QCustomPlot 踩坑记录

react native新建项目踩坑记录

JavaEE tomcat10踩坑记录