ReactJS中不同类型的状态详解

引言

在这篇文章中，我们将介绍ReactJS中不同类型的状态，以及我们是如何轻易地将这些类型混为一谈的。我们还将讨论哪种状态应该使用哪种工具/库/包。这篇文章将充满了多汁的技术，所以要保持专注。所以不要浪费任何时间，让我们开始吧

误解

在已经配置好redux的情况下，利用redux的一个误区是当开发者开始为他们应用中的所有状态使用redux时，这样做是为了避免道具的钻取，并通过用商店包装你的应用，在你的应用的各个层面上 访问数据。但是，将服务器端的异步数据也存储在你的存储中，这就是问题所在。通过这样做，你试图每次都同步你的服务器状态，无论它在服务器端是否被更新，这都会扼杀你的应用程序的性能。比如说

// Global state maintaining client and server-side state
const globalState = {
  authors,
  books,
  readers,
  libraries,
  darkMode,
  sidebarStatus,
}

现在我们的全局状态正在处理作者、书籍、读者 和图书馆，这些都是服务器端的状态，而且效率不高，每次都要请求新数据。

服务器端状态与客户端状态

// Global state without server-side state
const globalState = {
  darkMode,
  sidebarStatus,
}

现在我们已经把服务器端状态从我们的全局状态中移除，并在我们的客户端状态管理库中处理它们的所有麻烦事。

我们的想法是有两个真相来源，前端（客户端状态）和另一个是后端（服务器端状态）。 你继续使用redux、context、mobx或任何其他全局状态管理工具来处理客户端状态，同时使用React Query来处理服务器端状态。

什么是React Query？

• React查询是一个服务器端的库，它可以帮助你保持服务器和客户端之间的通信顺畅，并以较少的代码提高性能。
• 它对TS/JS、React、Vue、Svelte和Solid的异步状态管理非常强大。
• 你可以手动重新获取、缓存、刷新、延迟加载、分页，并对你的服务器端数据做很多事情。

React query提供了像useQuery和useMutation这样的钩子，这些钩子可以让你在短时间内启动和运行，并允许你删除任何用于维护服务器端状态的模板代码。

引擎盖下的React查询

总结

在这篇文章中，我们涵盖了很多内容，我希望你没有在中间离开我 。如果你真的掌握了这篇文章的要点，请为自己感到骄傲，因为这篇文章是一个很难理解的内容。 你可以学习更多关于react query的知识，这个库还有更多的内容。