React suspense 有什么好处？答案

【问题标题】：What benefits does React suspense have?React suspense 有什么好处？
【发布时间】：2020-05-31 01:32:24
【问题描述】：

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

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

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

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

【问题讨论】：

声明性
@evolutionxbox 到底是什么意思？
声明式，意味着我不需要知道它是如何实现的。
@evolutionxbox 好的，但我并不要求这是公平的。我问的是，一旦在我的应用程序中使用它，我会比传统方法有什么好处。即，如果我已经可以毫不费力地获取数据，为什么还要学习这个 API？
因为它不那么麻烦。当 .then 工作正常时，为什么还要使用 async/await？

标签： javascript reactjs react-suspense

【解决方案1】：

使用它有几个好处：

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

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

【讨论】：

全部都不需要写“isLoading”一次！
第1点，我不太了解。第2点，数据获取已经很容易了，不是吗？第 3 点，我可以使用三元组来显示加载微调器，直到获取数据。还在苦苦寻找为什么它如此出色？还是偏好？
第 1 点，如果您使用 react-loadable 之类的东西，您会明白它变得多么容易，第 2 点描述了您需要了解的所有内容，第 3 点 => 好的，但常见的反应只是提供对开发人员来说，这比我们简单的三元操作更可靠

【解决方案2】：

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

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

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

老办法

这样做的好方法是：

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

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

新方式

React 引入了 Suspense 组件和 Error Boundaries 以消除此样板文件并以声明方式描述所需的行为。

看看这个：

<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>
  );
}

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

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

Play with web example at codesandbox.io

Play with native example at snack.expo.io

【讨论】：