react hook之React.lazy()

也不怕大家笑话，看到react.lazy（）我第一个想到的居然是vue 中的一个vue-lazy 用户懒加载的插件。但是这两个差别还是有点大的。
好了我们言归正传，开始来看看我们的react.lazy()
其实看见lazy（）大家见名知意，就知道是来做懒加载的，但是这个是来做组件的懒加载。

为什么需要react.lazy()

我们所知道的是，webpack 打包时我们如果没有分模块打包的话，就会把所以的文件都打入一个包中，这样的话加载就会很慢，我们怎末解决这个问题呢，在vue 中我们主要用的方式时动态导入懒加载的方式
这个我就不在这里写了
链接: link.
感兴趣的大家可以去阅读上方的地址
现在我们来看看react.lazy（）是怎么做的

const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (// Displays <Spinner> until OtherComponent loads<React.Suspense fallback={<Spinner />}><div><OtherComponent /></div></React.Suspense>);
}

我们需要注意的这个组件他会返回一个propmise,需要使用函数来调用，而且还是主动抛错的，resolve
但是有一个问题是当我们在懒加载时组件组件在没有加载时，页面该怎样呈现呢？
这个我么就要引入Suspense了，这个就是来解决这个问题的

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const TowComponent = React.lazy(() => import('./TowComponent'))function MyComponent() {return (<Suspense fallback={<div>Loading...</div>}><OtherComponent /><TowComponent /></Suspense>);
}

如果组件在懒加载的时候出错了怎么办呢？
我们可以通过异常捕获边界来解决这个问题

import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const TowComponent = React.lazy(() => import('./TowComponent'))function MyComponent() {return (<MyErrorBoundary><Suspense fallback={<div>Loading...</div>}><OtherComponent /><TowComponent /></Suspense><MyErrorBoundary>);
}

class MyErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染能够显示降级后的 UIreturn { hasError: true };}componentDidCatch(error, info) {// 你同样可以将错误日志上报给服务器logErrorToMyService(error, info);}render() {if (this.state.hasError) {// 你可以自定义降级后的 UI 并渲染return <h1>Something went wrong.</h1>;}return this.props.children; }
}
export default MyErrorBoundary ;

注意点

react.lazy()只支持默认导入，不支持重命名的方式

const Tow = React.lazy(() => import('./TowComponent'))

如果你非要重名等操作，你可以创建一个中间模块进行

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

react hook之React.lazy()相关推荐

hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState
react hook是react推出的一种特殊函数.这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性(诸如目前react的钩子函数拥有的所有特性). 最常用的ho ...
slqite3库查询数据处理方式_绝活！十一个优质React Hook库, 收藏备用
本文字数:6539字预计阅读时间:18分钟建议阅读方式:收藏备用温馨提示:最近全国大幅降温,注意防寒保暖,开心跨年长按识别,后台回复 "电子书" 即可领取<JavaS ...
React Hook的用法: State + Effect(一)
React Hook 简述 React Hook 是React 16.8 这个版本新增的一个特性.在此之前我们编写React组件一般大多数都是用 class组件,而非函数组件,因为函数组件不具有cla ...
【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章课程导学 01-01 课程介绍一. ...
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html (1)问题分析? Hook 是什么? Hook 是一个特殊的函数,它可以 ...
react --- Hook的使用
Hook 是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性特点: 无需修改组件结构的情况下复用状态逻辑将组件相互关联的部分拆分成更小的函数 ...

react hook之React.lazy()

为什么需要react.lazy()

注意点

react hook之React.lazy()相关推荐

最新文章

热门文章