React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > ReactJS不同类型状态

ReactJS中不同类型的状态详解

作者:Jovie

这篇文章主要为大家介绍了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 query提供了像useQueryuseMutation这样的钩子,这些钩子可以让你在短时间内启动和运行,并允许你删除任何用于维护服务器端状态的模板代码。

引擎盖下的React查询

总结

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

以上就是ReactJS中不同类型的状态详解的详细内容,更多关于ReactJS不同类型状态的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文