首页 计算机科学 前端 react

# react 如何使用懒加载？

# 什么是懒加载？

  • 当服务器返回的数据量过大的时候，缓存则不大适合了，因为系统内存有限。所以我们就要使用懒加载技术，对所需的资源进行按需引入。

# 1、React.lazy

注意：React.lazy 和 Suspense 技术还不支持服务器渲染，如果要实现按需引入，react 官网推荐使用 Loadable Comonents 这个库。

  • 使用前：

1
import OtherComponent from './OtherComponent'

  • 使用后

    1
    const OtherCompent=React.lazy(()=>import("./OtherComponent"))

    此代码会在组件首次渲染时，自动导入包含 OtherComponent 组件。

    然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import React,{Suspense} from "react"
    const OtherComponent=React.lazy(()=>import("./OtherComponent"))
    function MyConponent(){
        return(
        <div>
            <Suspense fallback={<div>Loading...</div>}>
    			<OtherComponent/>
                </Suspense>
            </div>
        )
    }

    fallback 属性接收任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载之上的任何位置。你甚至可以使用一个 Suspense 组件包裹多个懒加载组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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/>
            <AntherComponent/>
               </section>
        </Suspense>
           </div>
    }
    }

# React.lazy () 的优点

React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。