【九月打卡】第2天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第3章 神奇的 React 配合 typescript，完美输出

主讲老师：张轩

课程内容：

今天学习的内容包括：

3-21 Suspense 的概念
3-22 实践 Suspense

课程收获：

问：React Suspense有什么用呢？
答：在动态导入的帮助下，React Suspense让我们轻松定义延迟加载的组件。

两大用途：

动态加载组件
等待异步数据加载

const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded

// Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

Suspense 不是 “一个类似 axios 一样获取异步数据的库”, 而是 一种标准或者说是一种机制，当获取数据的库按照这种机制进行数据的操作的时候，它就可以享用 Suspense 的红利。

要完全支持 Suspense，就需要将现在的那些获取数据的第三方库，进行修改支持 Suspense 的特殊格式。

三种获取异步数据的解决方案

Fetch on render

const App = () => {
  const [userDetails, setUserDetails] = useState({})

  useEffect(() => {
    fetchUserDetails().then(setUserDetails)
  }, [])

  if (!userDetails.id) return <p>Fetching user details...</p>

  return (
    <div className="app">
      <h2>Simple Todo</h2>

      <UserWelcome user={userDetails} />
      <Todos />
    </div>
  )
}

Fetch-then-render

const fetchDataPromise = fetchUserDetailsAndTodos() // We start fetching here

const App = () => {
  const [userDetails, setUserDetails] = useState({})
  const [todos, setTodos] = useState([])

  useEffect(() => {
    fetchDataPromise.then((data) => {
      setUserDetails(data.userDetails)
      setTodos(data.todos)
    })
  }, [])

  return (
    <div className="app">
      <h2>Simple Todo</h2>

      <UserWelcome user={userDetails} />
      <Todos todos={todos} />
    </div>
  )
}

Render-as-you-fetch

// 特别注意这个不是一个 Promise，而是一个需要特殊适配 Suspense 的类 Promise 的格式
const data = fetchData()
const App = () => (
  <>
    <Suspense fallback={<p>Fetching user details...</p>}>
      <UserWelcome />
    </Suspense>

    <Suspense fallback={<p>Loading todos...</p>}>
      <Todos />
    </Suspense>
  </>
)

const UserWelcome = () => {
  const userDetails = data.userDetails.read()
  // code to render welcome message
}

const Todos = () => {
  const todos = data.todos.read()
  // code to map and render todos
}

实践 Suspense

转换 Promise 为 Suspense 支持的数据结构。

wrapPromise 的工作机制：

接受 Promise 作为参数
当 Promise resolved，返回 resolved value
当 Promise rejected，throw 对应的 rejected value
当 Promise pending，throw 对应的 Promise 对象
暴露一个对应的 read 方法，来读取 Promise 的状态