#优质博文 #前端 #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，原来它是元素级细粒度更新。原理性能最佳实践都在这七千字里

它真的太强了！

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools
科技爱好者周刊（第 300 期）：三十年，解决人生三大问题

1. 字幕工具箱 🧰 这个网站收集了一些字幕相关的工具，纯前端处理，无需安装任何插件或软件。 #在线工具
2. Segmentify 🧰 一个 Figma 插件，使用浏览器 GPU 能力运行 AI SAM 模型，快速分割图片，从图片中提取元素至 Figma 文件。 #AI
3. QR code designer 🧰 一个 Web 工具，用来设计二维码，可以嵌入各种文字和图形，另有一个类似工具。
4. 一个不知名的开源项目可以带来多少收入？（中文） 📓 三年前，作者决定做一个开源的开发工具。三年过去了，这个项目怎么样了，赚了多少钱。 #开源

【唔姆，最近让我感兴趣的东西蛮少的】

zm.i8k.tv

字幕工具箱 - 免费的在线字幕工具集合

即开即用的免费在线字幕工具，包含剪映字幕导出、字幕转文本、双语字幕、字幕连接、简繁互转、微调、变速等功能

#前端 #react #compiler #小知识

乐呵

2024前端React最新面经:
1、请简述React Compiler原理
2、请简述AST、HIR、SSA的数据结构和作用
3、请列出三个React Compiler Pass并简述其作用

Source Twitter @hd_nvim

X (formerly Twitter)

Herrington Darkholme (@hd_nvim) on X

2024前端React最新面经:
1、请简述React Compiler原理
2、请简述AST、HIR、SSA的数据结构和作用
3、请列出三个React Compiler Pass并简述其作用

#前端 #设计 #uwu #kawaii #lottie #动画
Recreated and animated Sawaratsuki's Next.js Kawaii Logo

YouTube 上名为“重新创建和动画 Sawaratsuki's Next.js Kawaii Logo”的视频演示了用 kawaii 风格重新创建和动画 Next.js 标志的过程。它展示了使用 Lottielab 使徽标栩栩如生的分步技术。

Edit the Lottie animation (11kB) here: https://www.lottielab.com/examples/nextjs-by-sawaratsuki

via Youtube Lottielab

#碎碎念 #流麻
为了 pocket3 先试了试小米相机专业版的 Log 模式导入了个 lut 调色，我曹我之前拍的都是什么一坨 这个调色之后看着也太舒服了吧

#优质博文 #阮一峰的科技周刊 #资源推荐 #AI
【咕咕咕咕咕咕咕咕咕咕咕不会有人知道我咕咕咕了几期】

科技爱好者周刊（第 299 期）：AI 的关键是语料

1. 空的 S3 存储桶也能产生费用（英文） 📓 亚马逊 S3 是最流行的存储云服务，作者建了一个空存储桶，万万没想到，没有写入任何数据，两天居然产生了1300美元的费用。

第 1 课：任何知道您的任何 S3 存储桶名称的人都可以随意增加您的 AWS 账单。
第 2 课：向存储桶名称添加随机后缀可以增强安全性。
第 3 课：当对 S3 执行大量请求时，请确保显式指定 AWS 区域，这样您就可以避免 S3 API 重定向的额外费用。

【 评：比较有意思的是，即使存储桶为空，被大量未授权请求攻击也会导致AWS账单激增至1300美元。 】

2. HackerNews 每日 AI 摘要 🧰 这个项目对 Hacker News 每天的热点文章，生成中文的 AI 摘要，除了官网，还会发到飞书上面。（@rmrf 投稿）

为什么做 HackerNews 的每日摘要
- 我每天希望了解一下过去 24h HackerNews 上有哪些火爆的文章
- 但是又不想花太多时间浪费在浏览上，最好能有一个快速的浏览
- HackerNews 帖子的网友评论通常很有含金量，我也希望可以通过他们了解是否值得去精读

【评：挺好，订阅了 - RSS源 】

3. VideoSubtitleGenerator 🧰 一个命令行工具，通过语音识别，批量为本地的视频文件生成字幕，并支持翻译。（@buxuku 投稿）
【不晓得效果咋样嘞，有无人用下看看】

4. 海棠诗社 🧰 网友开发的诗词网站。（@javayhu 投稿）
【界面挺简洁，设计的可以】

Medium

How an empty S3 bucket can make your AWS bill explode

Imagine you create an empty, private AWS S3 bucket in a region of your preference. What will your AWS bill be the next morning?

#资源推荐 #前端 #javascript #正则 #在线网站 #tools

写 bot 的时候发现个好东西，之前好像见过英文版忘记发了

https://regexr-cn.com/

AI 摘要：RegExr 是一个在线工具，用于学习、构建和测试正则表达式。它支持JavaScript和PHP/PCRE正则表达式，并提供即时的匹配结果显示。用户可以使用测试功能来验证表达式的正确性，还能保存并分享正则表达式。此外，该工具包括完整的正则表达式文档、示例和帮助，还有社区正则表达式搜索和评分功能。

——————
找到原版了：https://regexr.com/
源码在： https://github.com/gskinner/regexr