2

我知道 React suspense 是新的，还没有正式发布生产，但我想知道它的主要好处是/或使用它会是什么？

我看不出它所做的任何事情都是“新的”或替换不存在的东西？

我知道它允许我从上到下加载东西，但无论如何我都可以使用我自己的组件做出反应

谁能给我一些关于它可能有什么好处的想法？

4

2 回答 2

2

使用它有几个好处：

  1. 它使代码拆分变得容易
  2. （使用新用例）它使数据获取变得如此简单！读这个
  3. 它只是暂停您的组件渲染并渲染一个后备组件，直到您的组件准备好显示，您可以使用简单的 UI 轻松地为您的组件创建一个框架流事件（想象而不是通过Api 或其他东西async创建加载登录useState别的 ）

这些只是 Reacts Suspense/lazyapi 的简单好处。

于 2020-02-15T15:38:02.623 回答
0

首先要提一下，Suspense 是从 React 16.6开始正式发布的。它是生产就绪的，并且不仅限于代码拆分。任何异步代码都可以与之集成。

至于好处，请考虑以下用例：

  • 我们有几个组件都在其中使用了一些异步代码（例如获取远程资源）
  • 我们需要显示一个加载指示器，直到所有组件完成它们的工作
  • 如果某些组件未能履行职责，我们需要显示适当的错误

老路

这样做的好方法是：

  • 创建一个包装器组件以显示加载指示器和错误消息
  • 跟踪每个组件内部的加载和错误状态，并通知包装器组件状态更改

这一切看起来都是不必要的、难以更改的样板吗？是的，它确实）。

新的方法

React 引入了Suspense组件和错误边界来消除这个样板文件并以声明方式描述所需的行为。

看一下这个：

<Exception fallback="An error has occured">
  <Suspense fallback="Loading...">
    <OurComponent1 />
    <OurComponent2 />
    <OurComponent3 />
  </Suspense>
</Exception>

例子

假设我们想从远程资源中获取用户数据。

const fetchUsers = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  console.log("Users data", users);
  return users;
};

我将使用makeSuspendableHook将我们的异步获取集成到<Suspense>错误边界内。

const useUsers = makeSuspendableHook(fetchUsers());

在我们的组件中，我们应该关心的只是实际数据及其表示。

const Users = () => {
  const users = useUsers();
  return (
    <div>
      List fetched users:
      <ul>
        {users.map(({ name }) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

最后，我将使用异常作为错误边界实现将所有内容拼接在一起。

export default () => (
  <Exception fallback="An error has occurred">
    <Suspense fallback="Waiting...">
      <Users />
    </Suspense>
  </Exception>
);

在 codesandbox.io 上玩网络示例

在snack.expo.io 上玩原生示例

于 2020-08-30T07:55:51.877 回答