从工作原理入手理解React八：Suspense

什么是Suspense

Suspense是一个React的内置组件，它允许在子组件完成加载前展示备用方案fallback，为异步组件的渲染过程提供了优化方案。

为什么需要Suspense

异步组件的渲染让整个渲染流程变得不可控，通常情况下需要添加额外的代码来控制异步组件的渲染渲染流程以及额外的状态和判断逻辑控制组件的渲染内容。

基本使用

特性：

• 激活条件。启用了Suspense的数据源才会激活Suspense组件，在Suspense组件的子组件中存在lazy组件或者使用use读取缓存的Promise的值时。
• 同时展示内容。Suspense等待其所有子组件准备完成后一次性完成渲染。
• 边界。Suspense对其所有子组件生效，当遇到下一个嵌套的Suspense时停止。
• transition引起的组件更新不会触发Suspense

通过对Suspense特性的运用，我们可以实现加载时展示备用方案、同时或逐步展示内容等场景

基本使用如下：

/**
 * 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(
    <>
      {/* 添加Suspense */}
      <Suspense fallback={<div>loading...</div>}>
        <div onClick={changeShowLazy}>
          {showLazy ? <LazyComponent /> : <div>123456</div>}
        </div>
      </Suspense>
    </>
  )
}