Yang

Dev Explorer Eeekly.040

0 views
2 mins

Slipshow

一种新的幻灯片展示方式,专门为传统幻灯片不足以满足技术演示而设计的工具,不再是横版幻灯片,它是竖向的,且可以无限长。链接:GitHub - panglesd/slipshow: An engine for displaying slips, the next-gen version of slides

CleanShot 2024-06-04 at 10.14.19@2x.png

Wiredjs

手绘风格的自定义元素集合。非常适合线框图或有趣的外观。链接:GitHub - rough-stuff/wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look. CleanShot 2024-06-04 at 17.11.40@2x.png

BuildYourX

构建你自己的 X,这个存储库整理了精心编写的分步指南,用于从头开始重新创建我们最喜欢的技术。地址:GitHub - codecrafters-io/build-your-own-x: Master programming by recreating your favorite technologies from scratch.

CleanShot 2024-06-04 at 17.13.09@2x.png

MeltUI

一个用于构建高质量、可访问设计系统和 Web 应用程序的开源 Svelte 库。Melt UI 使开发人员能够创建体现其独特风格的易用 UI。Melt UI 高度重视可访问性、无限的自定义选项以及整体令人愉悦的开发人员体验,致力于成为 Svelte 的事实上的无头 UI 库。GitHub - melt-ui/melt-ui: A set of headless, accessible component builders for Svelte. CleanShot 2024-06-06 at 15.05.30@2x.png

Post

I tried React Compiler today, and guess what… 😉

作者探讨了最新的 React Compiler

  • 是什么: React 团队开发的工具,集成到构建系统中,会自动将组件代码转换为 memoization 的代码
  • 解决了什么问题: React 中重新渲染是级联的,状态改变会出触发组件及其子组件的重新渲染,可能导致性能问题。React Compiler 不再需要手动 useMemo、useCallback、memo

通过三个项目使用 React Compiler 来验证是否能够使我们不在手动处理 React 中的 memoization ,结果不是很好,在三个应用中, Compiler 只能解决一小部分明显的不必要重新渲染问题,但其在一些简单案例和简单组件上表现很好,要想要使 Compiler 正确工作,需要对现有代码进行一些修改,例如提取 useMutation Hook的 mutate 方法,拆分、提取独立组件等。

总结下来就是目前 Compiler 还无法完全替代手动的 memo useMemo useCallback ,而且一旦 Compiler 成熟,开发者可能会因为它在 Dev Tools 中显示的 memo 效果而忽视掉一些重新渲染的性能问题。

Cleaner components with useSuspenseQuery | Swizec Teller

使用 React Suspense 来解决 React 中因为状态和执行路径组合爆炸式增长导致的代码代理阅读和理解的问题,使用 Suspense 简化组件的实现,而无需单独处理 Loading和Error状态。

使用 React Query 的 useSuspenseQuery 来挂起组件渲染并获取数据直到数据加载完成,当数据加载失败时,渲染 ErrorBoundary 错误组件,通过重置来重新获取数据渲染

为什么 useSuspenseQuery 会自动触发 ErrorBoundary 和 SuspenseLoading? 这是因为当数据获取失败时, useSuspenseQuery 内部会 throw new Error ,Suspense 捕获来自组件树的reject Promise,并渲染 ErrorBoundary。作者再随后的文章中对此也进行了解释说明➡️Why useSuspenseQuery works | Swizec Teller

Other