#碎碎念 #猫
不知道为什么最近每天的开心要溢出屏幕咧，分大伙点🥰🥰🥰🥰

可能是一是因为快要回家了，回家就能见到弟弟妹妹麻麻了嘿嘿嘿嘿。二是养猫太治愈啦，附赠小腊八美照*2

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 302 期）：创业虽然好，不敢推荐了

1. <span>元素可以干什么（英文） 📓 <span>是一个表示行内文本的 HTML 网页元素，本文收集了许多案例，你可以用它做各种各样的事情。 #css
2. 如何在 JavaScript 中快速读取文件（英文） 📓 作者列出了 JavaScript 读取文件的5种方法，并且比较了它们的性能差异。 #javascript
3. Sink 🧰 一个基于 Cloudflare 的短链接应用，带有访问统计。（@ccbikai 投稿） #短链接 #自部署
4. PicImpact 🧰 一个 Web 相册程序，基于 Next.js。（@besscroft 投稿） #nextjs
5. Gallery-Portfolio 🧰 一个开源的"瀑布流"照片展示程序，后端可以放在免费的 Cloudflare R2（或其他兼容 AWS S3 的存储），参见 Demo。（@linyuxuanlin 投稿）
6. widget-qrcode 🧰 一个网页二维码的 web component 组件，支持自定义二维码风格模板、前景、背景、logo等。（@mumuy 投稿）
7. cobalt 🧰 一个开源的视频下载网址，支持多个视频网站，包括 B 站、Youtube、instagram 和 Twitter。

【这期的 gallery 相关工具推荐还挺多的】

GitHub

【开源自荐】Sink - 基于 Cloudflare 带访问统计的短链系统 · Issue #4529 · ruanyf/weekly

特性 链接缩短 访问统计 Serverless 部署 自定义 Slug 🪄 AI 生成 Slug 链接有效期 演示 Sink.Cool Site Token: SinkCool 全站分析 链接管理 单个链接分析 开源 https://github.com/ccbikai/sink

#优质博文 #前端 #react
我真的太爱 useOptimistic 这个新 hook 了

AI 摘要：本文介绍了 React 19 新推出的 `useOptimistic hook` ，它简化了乐观更新的实现过程，使得原本复杂的乐观更新变得简单易用。乐观更新是在提交数据时，不等待真实请求结果，直接更新 UI 的方式，适用于高成功率、可撤销的操作场景。

文章主要内容包括：
1. 乐观更新的概念：直接更新 UI，不等待请求结果。
2. 适用场景和前提条件：适用于高成功率、可撤销的操作，如消息发送、点赞等。
3. 技术条件：需要保留上一次状态以便撤回，处理快速重复的更新请求，确保更新操作按顺序执行。
4. useOptimistic 实现：提供临时状态用于快速响应 UI，真实状态在请求成功后更新。通过实例展示了消息发送和点赞按钮的具体实现。

React 19 的 `useOptimistic` hook 提供了简化的乐观更新实现方式，提升了用户交互体验，降低了开发复杂度。

via 微信公众号 这波能反杀

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 301 期）：OpenAI 的图书馆工位

1. 谷歌搜索的新模式（英文） 📓 谷歌美国版在搜索页面上，加了一个"人工智能概述"，给出 AI 对搜索结果的总结。
很多人不喜欢这样，因为他们使用谷歌是为了查找网站而不是获取答案。所以，谷歌又添加了一个"传统模式"，让你查看没有 AI 的搜索结果。
2. Windows 画板引入 AI（英文） 📓 11 的新版本，将 AI 引入了传统的画板程序（Paint）。用户只需画出轮廓（图左），AI 会自动生成对应的图片（图右）。#AI 【草，这也行】
3. AI 解读网页报错（英文） 📓 谷歌为 Chrome 浏览器的开发者工具，引入了 AI，现在可以查看网页报错的 AI 解读。
4. krita-ai-diffusion 🧰 图像编辑器软件 Krita 的 AI 插件，类似 PhotoShop 的"图片 AI 扩充"，用 AI 绘制原图没有的部分，不过它是开源的。
5. CSS :has() 选择器教程（英文） 📓 本文介绍如何使用:has()选择器，特点是有大量互动示例。 #css
6. VSpace 🧰 一个浏览器插件，提供侧边栏的垂直书签和标签页管理器。
7. Keyviz 🧰 开源的 Windows 软件，在桌面上显示用户实时的按键。
8. autocomplete 🧰 公司推出的 JS 库，实现搜索关键字的自动补全。
9. JavaScript 语法问题（中文） 📓 这个仓库收集了100多个 JavaScript 的语法选择题，可以试试你是否真的了解这门语言。 #javascript

【评：AI 周报】

Tedium: The Dull Side of the Internet.

How I Made Google’s “Web” View My Default Search

Forget AI. Google just created a version of its search engine free of the extra junk it has added over the past decade-plus. You just need one URL parameter.

#碎碎念 #猫
520（虽然已经过了）没什么好发的，就发个小腊八的亲亲给大家吧~~
9点多睡晕过去了醒来就是2点了...

#优质博文 #前端 #react #compiler #性能优化
React Compiler 深度解析与性能优化

AI 摘要：本文介绍了 React Compiler 的原理和最佳实践，展示了其元素级细粒度更新机制。关键内容如下：

1. 查看编译后的代码：通过 console 面板或 React Compiler Playground 查看。
2. Symbol.for() 介绍：用于创建全局唯一值，在编译后的代码中频繁使用。
3. 缓存原理分析：使用 useMemoCache 缓存所有运算表达式，减少重复渲染。
4. 实践案例：
- Counter 递增：展示基础的状态递增例子，强调缓存元素的优越性。
- 昂贵的子组件：通过缓存避免重复渲染，提升性能。
- Tab 切换：实现极限性能优化，仅渲染当前 Panel，并缓存已渲染的 Panel。
5. 最佳实践：
- 避免使用 useCallback、useMemo、Memo 等缓存函数。
- 安全使用闭包。
- 引入严格模式及 eslint-plugin-react-compiler。
- 尽量少用 useEffect。

React Compiler 提升了性能，实现更高效的渲染和状态管理。

有一个评论比较有意思：「可以预见以后的 debug 流程一定会有 “你关掉 compiler 试试呢” 这一步」

之前还有一篇：苦等三年，React Compiler 终于能用了。使用体验：很爽，但仍有瑕疵 也可以看看

via 微信公众号 这波能反杀

Weixin Official Accounts Platform

我已彻底拿捏 React Compiler，原来它是元素级细粒度更新。原理性能最佳实践都在这七千字里

它真的太强了！