本期看点:Jules Blom 提出一种新的 React 父树与所有者树可视化标记法,可标注 Context、Suspense、memo、错误边界与 RSC;Next.js 16.4 把 Cache Components 设为推荐默认;Coinbase 紧随 Shopify 决定从 React Native 迁出;TanStack Charts 1.0 正式发布。
编辑:TimLi
🔥 本周热点
为 React 的父树与所有者树设计一种可视化标记法 —— 一套为 React 应用设计的图表标记提案:既展示每个元素最终落在哪里(父树),也展示是哪个组件创建了它(所有者树),并标注出 Context、Suspense、memo、错误边界与 RSC。还有一个在线 playground,可以把贴进去的代码自动画出树形图。Jules Blom
https://julesblom.com/writing/react-visual-notation
Next.js 16.4 把 Cache Components 设为推荐默认 —— 重头戏是 Cache Components 现在成为了推荐做法,并且如果你使用 create-next-app,它默认就是开启的。Agentic 工具 也得到了一波升级,并附有面向所有应用的一些小改进。The Next.js Team
https://nextjs.org/blog/next-16-4
快讯:
React 基金会旗下各工作组将于下月在伦敦的 Contributors Summit 上首次线下聚会。属于邀请制,但贡献者可以自我提名。
长按识别二维码查看原文 https://www.react.foundation/summit
📱 紧随 Shopify 的脚步,Coinbase 也宣布将 App 从 React Native 迁出,再次引用了 "AI 编程 Agent 已让"把同一个功能写两遍"的成本变得很低" 的观点,并表示可以更早用到各平台的新特性。
长按识别二维码查看原文 https://www.linkedin.com/posts/adamawolf_senior-software-engineer-native-mobile-activity-7511201803389186048-JV6b
前 Callstack 成员 Barbara Markiewicz 𝕏 加入了 React 基金会,担任社区总监(Director of Community)。
长按识别二维码查看原文 https://x.com/sethwebster/status/2105422444529963495
📖 文章与视频
📄 我们能用 React Compiler 让 React 更快吗? —— 深入研究 React Compiler 的输出,并尝试用内联、blocks、selector 推断等额外编译 pass 做原型,探测 React 还能再快多少。Jimmy Miller
https://jimmyhmiller.com/what-does-the-react-compiler-even-do
📄 React Aria 全新可滑动 Sheet 及其背后的 CSS 技巧 —— React Aria 新增了可滑动的 Sheet 组件。Devon 解释了它是如何工作的:它并不在 JS 中处理触摸事件,而是用了一个超大可滚动容器 + CSS scroll snapping + view timelines,从而获得原生动量、回弹、与手势同步的动画等效果。Devon Govett(Adobe)
https://react-aria.adobe.com/blog/sheet
📄 借助 React Compiler 让 React Context 不再"昂贵" —— React Compiler 能否让我们摆脱 context selector?一项覆盖 5,000 个 radio 的基准测试表明可以。Jenna Smith
https://jjenzz.com/making-react-context-cheap/
📄 React 项目目录结构最佳实践(2026 版)Robin Wieruch
https://www.robinwieruch.de/react-folder-structure/
TanStack Charts 1.0:可组合、类型安全的图表库 —— 在创建 React Charts 约十年后,Tanner 带着重新设计的方案回归:图表由带类型的 marks 和 scales 组合而成,可用 SVG 或 Canvas 渲染,并提供 React 适配器。示例目录 展示了其广度,并附有代码样例。Tanner Linsley
https://tanstack.com/blog/tanstack-charts-1-0
Ink 8:面向 CLI 的 React 加入可滚动视图 —— 这款流行的 TUI 渲染器被 Claude Code 和 Gemini CLI 等项目所使用。Box 新增的 prop 支持可滚动视图,render() 可以接收任意 Node stream,且增量渲染只重写发生变化的行,减少闪烁。Vadim Demedes
https://github.com/vadimdemedes/ink/releases/tag/v8.0.0
Redux Toolkit 2.13:支持 TypeScript 7,useQuery 更加稳定 —— 新增对 TypeScript 7 的官方支持,并修复了 useQuery 每次渲染都新建 selector 的问题(该问题曾导致 isSuccess 在 refetch 过程中反复切换)。Mark Erikson
https://github.com/reduxjs/redux-toolkit/releases/tag/v2.13.0
💡 另一个好消息:所有 Redux 相关库的文档现在统一托管在 redux.js.org 上,其中包括 Redux Toolkit 的文档。
长按识别二维码查看原文 https://redux.js.org/
📢 其他生态
✨ 想要做出"涟漪、发光、融化进 ASCII"之类的特效,又不想写 shader 代码?Shaders 把它的 WebGPU 引擎与 190+ 特效组件 开源了,这些组件像普通组件一样直接放进 React 即可。
长按识别二维码查看原文 https://shaders.com/updates/shaders-is-open-source
Preact 11 在历经六年开发后终于发布。这个轻量级的 React 替代品获得了 Hydration 2.0 与自动 ref forwarding。如果你用
preact/compat在它之上跑 React 代码,升级指南 值得一看。长按识别二维码查看原文 https://preactjs.com/blog/preact-11/
上周,Remix 3.0 转为 stable,且不再基于 React 构建。好奇"后 React 时代"的 Remix 长什么样?Sergio Xalambrí 撰文回顾了 用 v3 构建了六个月的体会。
长按识别二维码查看原文 https://github.com/remix-run/remix/releases/tag/remix%403.0.0
🤖 Theo Browne 让 AI Agent 去把 TypeScript 7 移植到 Rust,得到的结果是 ts-rust —— 目前还非常实验性。
长按识别二维码查看原文 https://github.com/pingdotgg/ts-rust
🚨 截稿前的突发新闻:Deno 将加入 Cloudflare。
长按识别二维码查看原文 https://blog.cloudflare.com/deno-joins-cloudflare/
版本发布:
Mantine v9.7 —— 流行的组件套件新增应用引导 Tour 组件(上图所示),同时其 MCP 服务器现在对外开放了更多文档内容。
React Native Skia v3.0 —— 现在改用 Skia 的新一代 Graphite GPU 后端,可以▶️ 在这里看演示。
React Native Testing Library v14.1 —— 现已支持 React Native 0.88 与 React 19.3,并新增了一个
pullToRefresh()用户事件。Lexical v0.51 —— Meta 的可扩展文本编辑器框架。现在转为 ESM-only,是迈向 "Lexical 1.0" 的重要一步。
Base UI v1.9 —— 无样式、可访问的 React 组件。新增可筛选菜单(preview 阶段)以及大量 focus 与 Drawer 相关的修复。
⭐ MSW v3.0 —— 流行的 API mocking 库。现已 ESM-only,并支持 GraphQL subscription,体积也更小。
React Aria v1.22 —— 新增可滑动
Sheet组件,这里有专门的介绍。Material UI v9.5
🙋♀️ 关注我们