理解 Suspense 和 React Hooks

Question

我正在努力寻找使用Suspense和React hooks 的问题。

下面的 React 代码有几个关键问题。

import { Suspense, useState, useEffect } from 'react';

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});
  useEffect(() => {
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId, setData])
  return (
    <Suspense>
      <UserProfile data={data} />
    </Suspense>
  );
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => {
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
};

让我知道它们是什么。

我发现了两个关键问题。

• 的误用setdata在useEffect依赖阵列
• 没有提供suspense fallback道具。

我认为仍然存在一个关键问题。

一件奇怪的事情是为什么userId需要包含在依赖项数组中。

Answer 1

你滥用Suspense了它的核心，至少在数据获取的悬念可用之前。

Suspense 目前仅适用于React.lazy组件，不适用于应用程序的任意“加载”状态。例如，React 应该如何确定您data正在加载？

唯一的用途Suspense是允许在 React 加载惰性组件时显示一些回退。对于其他类型的延迟加载应用程序数据，您可以实现自己的回退，如下所示：

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetchUserProfile(userId).then(setData);
  }, [userId])

  return data ? <UserProfile data={data} /> : 'Loading...';
};

Answer 2

主要问题是您需要使用所谓的Suspense 集成来执行数据获取和与<Suspense>组件的接口。

通常，<UserProfile>组件会同步消耗资源（data在这种情况下是您的资源）并在资源尚不可用时挂起组件，从而导致<Suspense>临时呈现其fallback道具（您尚未指定）。当资源可用时，<UserProfile>将重新渲染，并同步返回消耗的资源。

我发布了一个名为 Suspense 的集成suspense-service，它允许您使用封装了 React Context API的服务来使用异步函数定义的资源。

这是suspense-service通过稍微修改您的示例代码来演示以下内容：

// import { Fragment, Suspense } from 'react';
const { Fragment, Suspense } = React;
// import { createService, useService } from 'suspense-service';
const { createService, useService } = SuspenseService;

const fetchUserProfile = userId => {
  return new Promise(resolve => {
    setTimeout(resolve, 1000 + Math.random() * 1000);
  }).then(() => {
    return {
      name: `User ${userId}`,
      email: `user${userId}@example.com`
    };
  });
};

const UserProfileService = createService(fetchUserProfile);

const SuspensefulUserProfile = ({ userId }) => {
  return (
    <UserProfileService.Provider request={userId}>
      <Suspense fallback={<h1>Loading User Profile...</h1>}>
        <UserProfile />
      </Suspense>
    </UserProfileService.Provider>
  );
};

const UserProfile = () => {
  const data = useService(UserProfileService);

  return (
    <Fragment>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </Fragment>
  );
};

const UserProfileList = () => {
  return (
    <Fragment>
      <SuspensefulUserProfile userId={1} />
      <SuspensefulUserProfile userId={2} />
      <SuspensefulUserProfile userId={3} />
    </Fragment>
  );
};

ReactDOM.render(<UserProfileList />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/suspense-service@0.2.3"></script>
<div id="root"></div>