从工作原理入手理解React七：lazy

什么是lazy

lazy 是一个函数，是React中内置的一种组件代码加载机制，优化应用性能。它能够让你在组件第一次渲染前延迟加载组件的代码，用于在React项目中实现组件的按需加载。

为什么需要lazy

在单页面应用中，页面是通过组件（js）渲染出来的。默认情况下，浏览器加载js后会根据依赖（import）下载所有的组件资源，但部分资暂时并不会使用，这种情况下既造成了流量的浪费，也影响了网站性能。我们希望实现一种按需加载的机制，让这些资源在使用的时候再加载。这就是lazy API的设计目的。

lazy的基本使用

lazy 接收load函数，load函数返回Promise或者类Promise对象（实现then方法）。load函数会在lazy组件渲染阶段执行，React将等待其解析。然后将解析值的default属性渲染为React组件。返回的Promise和解析值都将被缓存，load函数不会多次调用。

lazy 返回一个React组件，这个组件被标记为lazy组件。当渲染时，懒加载组件代码加载过程中lazy组件会暂停渲染。

注意：

1、不应在组件内部声明lazy组件，这样在每次更新时都会重新创建状态。

2、懒加载组件是通过解析结果的default属性访问的，所以懒加载组件要通过default导出，不要再模块中导出其他内容，因为这可能导致按需加载失效。

lazy的基本使用如下：

/**
 * lazy.jsx
 */
export default function LazyComponent() {
  return(
    <>
      <h1>LazyComponent</h1>
    </>
  )
}

/**
 * useLazy.jsx
 */
import {lazy, useState} from "react"
const LazyComponent = lazy(() => import('./lazy'))

export function UseLazyComponent() {
  const [showLazy, setShowLazy] = useState(false)
  function changeShowLazy() {
    setShowLazy(prev => !prev)
  }
  return(
    <>
      <div onClick={changeShowLazy}>
        {showLazy ? <LazyComponent /> : <div>123456</div>}
      </div>
    </>
  )
}