#优质博文 #前端 #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并简述其作用