Javascript 悬念有什么好处？

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

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

我知道它允许我从上到下加载东西，但我可以使用自己的组件在react中实现这一点

---

有谁能告诉我它有什么好处吗？

使用它有几个好处：

它使代码拆分变得容易

（使用新用例）它使数据获取变得如此简单

它只是暂停您的组件呈现并呈现一个备用组件，直到您的组件准备好显示为止，这样您就可以通过一个简单的UI为

async

组件创建一个框架流，从而轻松地发生事件（想象一下，不是通过

useState

Api或其他方式创建加载登录）

---

这些只是Reacts

suspence/lazy

api的简单好处。

首先，我想提到的是，自React以来，suspence正式发布。它是生产就绪的，并且不仅限于代码拆分。任何异步代码都可以与之集成

作为好处，考虑以下用例：

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

老路 这样做的好办法是：

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

这一切看起来都是不必要的，很难改变的样板吗？是的，是的）

新方式 React引入了组件并消除了这个样板文件，并声明性地描述了所需的行为

看看这个：

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

我将使用在

和错误边界内集成异步获取

const useUsers = makeSuspendableHook(fetchUsers());

在我们的组件中，我们只需要关心实际数据及其表示

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

const Users=（）=>{
const users=useUsers（）；
返回(
列出已获取的用户：

{users.map（{name}）=>(
{name}
))}

);
}

最后，我将使用错误边界实现将所有内容缝合在一起

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

导出默认值（）=>(
);

---

是的declarative@evolutionxbox确切的意思是什么？声明性的，意味着我不需要知道它是如何实现的。@evolutionxbox ok，但我并不是为了公平才这样要求的。我在问，一旦在我的应用程序中使用它，在传统方法之前，我会注意到什么好处。i、 如果我已经可以轻松地获取数据，为什么我要学习这个API？因为它不那么麻烦。为什么要麻烦使用async/await when。然后就可以正常工作了？所有这些都不需要编写“isLoading”甚至一次！第一点，我不太了解。第二点，数据提取已经很容易了，不是吗？第3点，我可以使用三元来显示加载微调器，直到数据被提取。还在努力想知道为什么它这么棒？或者这是一种偏好吗？第1点，如果你使用类似于

react loadable

的东西，你就会明白它变得多么简单，第2点描述了你需要了解的所有内容，第3点=>好，但common react只为开发人员提供了这些，这比简单的网络操作更可靠

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