星期一 01 凌晨 五月 20o 2024
RD#456 Data Fetching Patterns in Single-Page Applications
Data Fetching Patterns in Single-Page Applications
32 minutes by Juntao Qiu
When a single-page application needs to fetch data from a remote source, it needs to do so while remaining responsive and providing feedback to the user during an often slow query. Five patterns help with this. Asynchronous State Handler wraps these queries with meta-queries for the state of the query.
Instantly see where your React components are used
sponsored by Omlet
Do you know where and how your components are actually being used in apps? Omlet shows you exactly that with a quick scan of your codebase. Get visibility into which components are popular, identify gaps, and make data-driven decisions to evolve your design system.
Build Your Own React.js in 400 Lines of Code
12 minutes by Zachary Lee
This article will help you building a version of React with about 400 lines of code that supports asynchronous updates and can be interrupted—a core feature of React upon which many higher-level APIs rely.
Why React Query?
15 minutes
React Query gets downloaded 3.3 million times a month – this is the story of why it exists and what problems it solves.
Bulletproof React
3 minutes by Alan Alickovic
This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with a lot of different codebases, this architecture turns out to be the most effective.
Snappy UI Optimization with useDeferredValue
13 minutes by Josh W. Comeau
useDeferredValue is one of the most underrated React hooks. It allows us to dramatically improve the performance of our applications in certain contexts. I recently used it to solve a gnarly performance problem on this blog, and in this tutorial, I’ll show you how.
[在线阅读](https://link.mail.beehiiv.com/ss/c/u001.3mTwTBe\_1W4fLvRj4unk8hErXB2vrDHg5DYaj51xP1UFkDJhzxZTtXJo4etRzVTCxpbogyhkZ2CIvklBpd9BhG0t-Yg0\_13sIv8OqK53DAF7h TjCoBk2ZH3YpMBmHEePQAtrtJj80ZviW5oL-LkrLEPVjOjPiQzdJIENy6OhQuUOspGmLeEQFMRTw1H0qbH1qHvl3g731Jk87qT0Oi55A3JckHb8tTdCTC9tm5GmWYzV1-lMgf84y3JZ7rlz9 J2HLzPCEQFvJMP1pya4eL87EtgFAU7ULE-onQnzYre1U2hT4Es172qOF04szc9bd7bZZTB3Yg2D4vIrUBl9j9joPzttkfcFHOPWIzsOVZ8huGbUVXT6-fkjJlCtB_LHpiFyFgEHZzpsuIlu1X b2xsmkQIymyOoefACd0XuKzpiIiAiVi8QKinFUh1iJoUQBAeQGHJgRaG870iGRTDzCyRNunkFGYga3cwGD0Xa8iZTOI9fX4CRK6-2cmCpOakEEycKzhwvncbDsKOjraQhv0WRPbvUc-WtQ-uXOD0vuQt0 Gy4188Xp5GG2aX9ySH1SdSI2aNB1x-x212euyTEMPELF62zyZpJ9h9ejXJo83C3CDVbEYnAqk8X8UejF4tDtS9bC_On3JrfjFlrHtLsuyYVlQIb63ehq_bt0CoZXQyNme28kQrGLP4-wC x4TABvZZ8-cMoJrMIyuSQSOHtxn6ZJeWyQ/46h/CcnW49n1TsCYyTcoWpRCDA /h0/h001.OXcez3zmNQ48syPufmn2fWGyZhRp4FTkCrDzGyXINLc)
[单页应用程序中的数据获取模式](https://link.mail.beehiiv.com/ss/c/u001.9rj0kBGH2\_rh17KMcAxCTRKqYX17ZJ\_ExtJFEjYsXqjNfJ2CLMR5yVskCEN6Hl1mJAioWzjQly\_UxRjcBp0H\_GkOHHErHjOn2gAAV HKOxgshe-89HJ46Sl4VxeuzvaHJzaGHB0DSklAp7VHhjiBBocU9PK0vJQTeHBqOaDZ-h6ym377cIX_NIHifa78rkOOCbaM3TE4PUJDpGrXE_4GbUpRspRolggEF93DAJEdgWtz2EOp-w5y49hsp4SK2MC76/4 6h/CcnW49n1TsCYyTcoWpRCDA/h1/h001.tsRSSriF7jzamXee9b-doegRBZs-I_ZnsgpExiAQjEA )
32 分钟 邱俊涛
当单页应用程序需要从远程源获取数据时,它需要在执行此操作的同时保持响应并在通常缓慢的查询期间向用户提供反馈。五种模式对此有所帮助。异步状态处理程序将这些查询与查询状态的元查询包装在一起。
[立即查看 React 组件的使用位置](https://link.mail.beehiiv.com/ss/c/u001.GyLXS\_kgZ\_zhliVlX2b\_SWCnHaEmu0ZUjW34u1J7dvkG4olRn3Sz0yD\_F5iiryaJOSEKB1qmku6M6Vt4FBtbuAZ4Km4Qf43HcdB91Q mCA-Q/46h/CcnW49n1TsCYyTcoWpRCDA/h2/h001.-h_EZHF8IJAhLq5et9wh06vZjr1et7h2uKSWHEl5ce0)
由欧姆莱特赞助
您知道您的组件在应用程序中实际在何处以及如何使用吗? Omlet 通过快速扫描您的代码库准确地向您展示了这一点。了解哪些组件受欢迎,找出差距,并做出数据驱动的决策来发展您的设计系统。
[用 400 行代码构建您自己的 React.js](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqdDm6Ocn47YmmMb18z44EiEyKD1OSfVf4OvEoJIJkIPrB\_2ht26CTfP-\_iHU5\_eChLouH x-qpzSx-skQFPu5854AjneROidnPN8LQE1bhKVGotVJZ9pswJetKZJfQnpbD3Ky9wcqtRaUt6sLzg-Vg-dd2RkvBKduEih3LWyCJAlqFzfvUgZh6qNPTIYSf_8CrOYCHJrasQtfig039I2zh dla5cw_IOiKTPeqzYwF3sP6Z-CHcA1ew7zs72yVBIdy7w/46h/CcnW49n1TsCYyTcoWpRCDA/ h3/h001.0Rg5YOWZxwOOKn77PHMHcuemqIiB9v9q4lEtUIhiuv8)
12 分钟扎卡里·李
本文将帮助您构建一个大约 400 行代码的 React 版本,该版本支持异步更新并且可以中断——这是许多高级 API 所依赖的 React 核心功能。
[为什么要响应查询?](https://link.mail.beehiiv.com/ss/c/u001.wjjBWwWz4938-Ka4Q4QVgOeGHaDaEt15OGYTL4CrSyd1\_GATnd4yprjFNfy6gVMf9iaWzY3lYadYarsD2mRAP1G69w0KvG4S2s\_bwWQBG 38fSVlhalN5PjLNUZgNSVU39C6P7N3bhrBEPpWMZJLWqKP2pG1ro_pRYB4vdNVd4I88-gjP40daD0XmBdEW5Y7OCdf0rsIdhIy199StdTjwBh6e_1dgjE5VwKYKN9ehDlk/46h/CcnW4 9n1TsCYyTcoWpRCDA/h4/h001.ERSJi1dG0qzfSzZTNJHi-gYK9g5DK5Vy8SdF255P1CI)
15分钟
React Query 每月下载 330 万次 - 这是关于它存在的原因以及它解决什么问题的故事。
[防弹反应](https://link.mail.beehiiv.com/ss/c/u001.TY9TQ8C6l-P2ea\_eXiYAmDt\_OptglJsVNYAFuGONW7Wn\_wVp1m7P\_WIDn8Ulz8izV68Ex5J-CKqwupF-HrqmhKiNK8ON7Y3kVekj\_ss5tI6Z0 8mskyvmzov9sncer3CwbY6hx4zL9baadRfQQvsgHQNwyXLpuDY2NzGibCN69rlSU-ARGeGCoVSCcHvWp wdJT0zaxjtIIuxdu8DlRQ1o7DNPk2hiQCaJWBDFcnwURNDXRZJ67UjM6wt10PiTf3gs/46h/CcnW49n1 TsCYyTcoWpRCDA/h5/h001.rOuOT352fZzQQx2Ci7Pw2-FvmxR8Zh8J5_yRpYC6HgQ)
3 分钟 艾伦·阿利科维奇
该存储库试图提供一种使用生态系统中一些最好的工具创建 React 应用程序的方法,并具有良好的可扩展性的项目结构。根据我使用许多不同代码库的经验,这种架构被证明是最有效的。
[使用 useDeferredValue 进行快速 UI 优化](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqfyko-iFD6lxTdvug6MbGi99rkss9ioeig-XPlVZf-NgVij4\_yMJ0vHP582EZHeBmGG\_4ldn0Vyopk68o RDSY492qvCEAHe-dOlOqxWHGTL_UZa_hKMzTisKrz9TvnTJWMRmfgywY5m1972yRoyRQcGXSCZ Cvs1BRvq3Mb7yOGwKjloAouNR-dI5wpSoywTyb03q_t5MGligf8chU2cpB1qdhHAdx0vGk5Rrm cslbCnN/46h/CcnW49n1TsCYyTcoWpRCDA/h6/h001.UJXu9uR5GUbm3ZHMI3S7iD4IZQA93X7AHNwUYc94s5k)
13 分钟 乔什·W·科莫 (Josh W. Comeau)
useDeferredValue 是最被低估的 React hook 之一。它使我们能够在某些情况下显着提高应用程序的性能。我最近使用它来解决这个博客上的一个棘手的性能问题,在本教程中,我将向您展示如何操作。
发布者