React 变得更加出色

如果你之前开发过 React 或 Next.js 应用，你可能已经注意到它们通常非常缺乏主见，尤其是在处理异步方面。这在我们 React 应用中获取数据的方式上发挥了重要作用。到目前为止，我们要么使用 React useEffect，useSWR要么最近又使用了React-query。但现在，React 中迎来了一项激动人心的新功能，它将使所有异步操作（尤其是数据获取）变得更加轻松。

介绍 use hook

更多信息请点击此处

本质上，我们终于找到了一种原生的方式来处理 React 中的异步功能。这意味着我们不需要依赖任何第三方库useEffect来获取数据，只需创建一个 axios 获取请求并将其包装在一个usehook 中即可。

例如：

export const Post = (id:string) => {
  const fetchPost = axios.get(`/api/posts/${id}`));
  const post = use(fetchPost);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

这将获取帖子数据并将其呈现在页面上。无需任何useEffect依赖或任何其他异步处理库。🎉

use hook 如何工作

类似地，await它只是解开了承诺的值，这意味着任何异步行为现在都可以包装在使用钩子中，并且反应将为我们原生处理承诺。

那么我们还需要 react-query 吗？

是的，我们确实需要。虽然 use hook 对 React 来说是一个很好的补充，但它仍然不能替代 React-query。use hook 仅用于处理异步行为，而不是缓存或任何其他高级功能。因此，如果您正在寻找更高级的数据获取库，React-query 仍然是您的最佳选择。然而，对于 React 团队来说，这是朝着正确方向迈出的一步，也是 React 生态系统中一个受欢迎的补充。我迫不及待地想看看社区会如何使用这个新功能。🤩

其他值得注意的有趣内容

与所有其他钩子不同，该use钩子似乎支持条件执行。类似于 react-query 的enabled选项。这意味着我们可以根据某些条件有条件地获取数据。当然，其他钩子不支持此功能，而且似乎只有 use 钩子支持此功能。RFC 中一个很酷的未来提案是，我们也可以将 React Context 包装在 use 钩子中。这将使我们能够以更具声明性的方式使用 context。不确定这是否会被写入最终的 RFC，但这是一个有趣的想法。

结论

这是迄今为止 React 即将推出的最酷的功能之一。我个人已经迫不及待地想在下一个项目中使用它了。我相信我们会看到这个新钩子的许多有趣用例。如果你想了解更多关于 use 钩子的信息，我强烈建议你查看 RFC。这是一篇非常有趣的文章，它能让你深入了解 React 团队对新功能的构想。