动态import

在说lazy和suspense之前，还是先说说动态import这种语法。

import语句我们使用的很多，通常是import ... from '...'这样的写法，这样的写法也被称作是静态加载。

而所谓的动态import或者说动态加载，就是指在运行时加载。写法如下：

import('./test.js').then(test => {...
});

可以发现，动态import实现了Promise规范，回调函数的test参数就是加载完成后的模块。

这么写有什么好处呢？一个页面中也许会有许多的逻辑代码并不需要在页面加载时加载，也许是在触发了某个事件如点击之后才需要加载。那么通过动态加载就可以实现这一点，好处在于可以加快页面加载的速度。

lazy

对于一段JS代码，我们可以在需要的时候通过动态import的方式异步加载，那么对于一个React模块，什么是“需要的时候”？到了这个时候又该怎么加载呢？

对于React模块，这个“需要的时候”自然就是要渲染它的时候，而想要在这个时候实现异步加载就需要使用React 16.6中新增的lazy方法了。

lazy是一个方法，它封装了“动态加载的过程”，如果对这句话不太明白，看下面的代码就能理解：

import React, { lazy, Component } from 'react';
const Later = lazy(() => import('./Later'));

上面代码中的Later是一个React组件，但它并不能被渲染，它只是一个“动态加载过程”的封装。它在要被渲染的时候就会去加载真正的Later组件。

lazy方法接受一个无参数的函数，函数必须执行动态import。

那是不是直接这样使用就可以了呢？

import React, { lazy, Component } from 'react';
const Later = lazy(() => import('./Later'));export default class App extends Component {render() {return (<div> <Later />  </div>);}
}

可以发现在浏览器中是会报错的：

出现这个报错就需要用到suspense了。

suspense

既然是动态加载，那么也就是说会有一个加载过程，那么在这个加载过程中就需要一个UI组件，来在等待过程中显示一些UI。

import React, { Component, lazy, Suspense } from 'react';const Later = lazy(() => import('./Later'));
export default class App extends Component {render() {return (<div> <Suspense fallback={<div>loading...</div>}><Later />  </Suspense></div>);}
}

这样就会在Later加载完成之前显示“loading…”字样。

suspense组件有一个fallback属性，它就是用来接收加载过程中显示的组件的。suspense内部是可以包裹多个组件的。

Error boundaries

Error boundaries，中文意为错误边界。我们希望部分UI的错误不会导致整个程序的崩溃，以及希望在错误发生时能够显示对应的UI。

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。

getDerivedStateFromError

此生命周期会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state。

注：getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。如遇此类情况，请改用 componentDidCatch()。

componentDidCatch

此生命周期在后代组件抛出错误后被调用。它接收两个参数：

error —— 抛出的错误。
info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

注：componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。它应该用于记录错误之类的情况。

import React, { Component } from 'react';export default class MyError extends Component {constructor(props){super(props);this.state = {hasError: false};}static getDerivedStateFromError(err){return {hasError: true};}componentDidCatch(err, errinfo){console.log(err);console.log(errinfo);}render() {const { hasError } = this.state;if(hasError){return <div>Something wrong!!!</div>}return this.props.children;}
}

React之lazy与suspense相关推荐

Lazy与Suspense
Lazy 和 Suspense 1.React.lazy 定义 React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件). 什么意思呢?其实就是懒加载.其原理就是利用es6 impor ...
如何在 React 18中利用Suspense 实现服务端渲染(SSR)
概述 React 18 将包括对其服务器端渲染 (SSR) 性能的架构做了改进.这些改进带来了实质性的效果,是几年来其团队工作的结晶.大多数的改进点都是在幕后进行的,但您需要了解一些选择加入机制,尤 ...
react新特性实例详解（memo、lazy、suspense、hooks）
1.memo 其实react.memo的实现很简单,就几行代码. export default function memo<Props>(type: React$ElementType,c ...
react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
React v16.6.0已经发布快一年了,为保障项目迭代发布,没有及时更新react版本,最近由于开启了新项目,于是使用新的react版本进行了项目开发.项目工程如何搭建,如何满足兼容性要求,如何规 ...
React 16.x折腾记 - (7) 基于React+Antd封装聊天记录(用到React的memo,lazy, Suspense这些)
前言在重构的路上,总能写点什么东西出来 , 这组件并不复杂,放出来的总觉得有点用处一方面当做笔记,一方面可以给有需要的人; 有兴趣的小伙伴可以瞅瞅. 效果图实现的功能渲染支持图片,文字,图文 ...
react 16.6 懒加载 Lazy 尝鲜
react 16.6 发布了新的功能 lazy ,和一个组件 Suspense 下面我们看一下他的用法首先我们先创建两个组件 LazyTest.1 和 LazyTest.2,内容相同 import ...
react中使用lazy函数进行路由懒加载
react中使用lazy函数进行路由懒加载 import React, { Component,lazy,Suspense} from 'react' //1.通过React的lazy函数配合impo ...
React.lazy与Suspence实现延迟加载
React.lazy与Suspence实现延迟加载 1 代码分割 2 React.Lazy 3 Suspense 4 备注 1 代码分割代码分割能够创建多个包并在运行时动态加载,它能够帮助我们&qu ...
【react】React.lazy
注意:React.lazy 和 Suspense 技术还不支持服务端渲染.如果你想要在使用服务端渲染的应用中使用,我们推荐 Loadable Components 这个库.它有一个很棒的服务端渲染打包 ...
react引入多个图片_重新引入React：v16之后的每个React更新都已揭开神秘面纱。
react引入多个图片 In this article (and accompanying book), unlike any you may have come across before, I w ...

React之lazy与suspense

文章目录