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的知识，这个库还有更多的内容。
以上就是ReactJS中不同类型的状态详解的详细内容，更多关于ReactJS不同类型状态的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了深入理解react的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
这篇文章主要介绍了React Native 脚手架的基本使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了react-native消息推送实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了react中ref获取dom或者组件的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了React的特征单向数据流学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React onBlur回调中使用document.activeElement返回body完美解决方案
这篇文章主要介绍了React onBlur回调中使用document.activeElement返回body完美解决方案,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合2022-11-11
这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
react配置webpack-bundle-analyzer项目优化踩坑记录
这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
React不使用requestIdleCallback实现调度原理解析
这篇文章主要为大家介绍了React不使用requestIdleCallback实现调度原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论