Slipshow
一种新的幻灯片展示方式,专门为传统幻灯片不足以满足技术演示而设计的工具,不再是横版幻灯片,它是竖向的,且可以无限长。链接:GitHub - panglesd/slipshow: An engine for displaying slips, the next-gen version of slides
Wiredjs
手绘风格的自定义元素集合。非常适合线框图或有趣的外观。链接:GitHub - rough-stuff/wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
BuildYourX
构建你自己的 X,这个存储库整理了精心编写的分步指南,用于从头开始重新创建我们最喜欢的技术。地址:GitHub - codecrafters-io/build-your-own-x: Master programming by recreating your favorite technologies from scratch.
MeltUI
一个用于构建高质量、可访问设计系统和 Web 应用程序的开源 Svelte 库。Melt UI 使开发人员能够创建体现其独特风格的易用 UI。Melt UI 高度重视可访问性、无限的自定义选项以及整体令人愉悦的开发人员体验,致力于成为 Svelte 的事实上的无头 UI 库。GitHub - melt-ui/melt-ui: A set of headless, accessible component builders for Svelte.
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
- Introducing the ESLint Configuration Migrator - ESLint - Pluggable JavaScript Linter - ESLing 官方推出了ESLint 配置迁移工具,可将原来的配置迁移为 FlatCompat