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 Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
本篇文章主要介绍了react-router实现按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要跟大家分享了关于React-Native中一些常用组件的用法，其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法，分别给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了React数据传递之组件内部通信的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了从react hooks闭包陷阱切入浅谈react hooks，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了React之防止按钮多次点击事件 重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了React跨端动态化之从JS引擎到RN落地，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React中如何设置多个className问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论