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 如何拿时间戳计算得到开始和结束时间戳,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了React反向代理与CSS模块化的使用案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要为大家介绍了React特征学习Form数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
React Native第三方平台分享的实例（Android，IOS双平台）
本篇文章主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了React echarts 组件的封装,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-06-06
在React中,通过自定义Hook useTimeHook实现定时器的启动与清除,在App组件中使用Clock组件展示当前时间,利用useEffect钩子在组件挂载时启动定时器,同时确保组件卸载时清除定时器,避免内存泄露,这种方式简化了状态管理和副作用的处理2024-10-10
这篇文章主要介绍了React Hook 父子组件相互调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
如何应用 SOLID 原则在 React 中整理代码之开闭原则
React 不是面向对象，但这些原则背后的主要思想可能是有帮助的，在本文中，我将尝试演示如何应用这些原则来编写更好的代码，对React SOLID原则开闭原则相关知识感兴趣的朋友一起看看吧2022-07-07
这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下2023-02-02
最新评论