React Compiler（原 React Forget）终于发布测试版并开源。Remix 官方宣布 Remix 和 React Router 将在未来合并。以及 React 19 新特性的实战经验。

本期带来了拥有 22k Star 的 React 大规模应用架构 Bulletproof-react，开源的基于 React 的游戏引擎，以及如何用 Next.js 和 Strapi 快速构建一个 AI 项目，最后还有 400 行代码实现一个 React。

Awesome React 是一个一直在维护的 React 生态相关资源的集合。一直在移除过时的项目并专注于基础内容，现在大概包含了 130 个库和资源。

本期看点：本期介绍了 React 19 Beta 版的新特性，包括支持自定义元素、增强的异步事务处理能力、以及原生元数据标签的渲染等新特性。同时，提供了详细的升级指南帮助开发者顺利过渡。工具方面介绍了 extension.js 用于简化浏览器扩展开发，Divz 用于增强 3D 交互。此外，还有关于 React-Spring 动画库的可视化工具介绍，帮助开发者更好地理解和应用动画效果。

本期带来一个最新现代 React 视频教程，从基础开始，包含一系列最新技术和最佳实践。还有 React Native 的重大更新（布局引擎版本升级 Yoga 3），以及如何为迎接 React 19 做好准备。

随着八周年的临近，Next.js 已经拥有超过 100 万的月活跃开发人员，并且这个版本支持使用 Turbopack 来改善本地开发、内存使用、CSS 和缓存优化、改善错误消息等。Next.js v15 似乎也即将与 React v19 同步发布。

TinyBase 是一个数据存储（适用于键/值或表格数据）工具，可以连接数据存储，并作为应用程序的响应式后端。除此之外它还支持绑定 React 和预构建响应式组件。v4.8 新增对 PowerSync 的支持，用于在 Postgres 和 SQLite 之间同步。

随着 Next.js 的脚步，越来越多的全栈框架开始支持 RSC，比如 Waku，现在 RedwoodJS 也开始支持 RSC，这是一个由 GitHub 的联合创始人 Tom Preston-Werner 创立的全栈框架，依赖于 React、Prisma 和其他技术，提供出色的开箱即用体验。本文深入探讨了如何使用 RSC，以及它们如何取代 Redwood 的 GraphQL 使用。

React Data Grid 提供了一个令人惊叹的实时演示，展示了该组件的所有独特功能，从分组行列到处理百万单元格却不会卡顿。

Geiger 提供了一种有趣的方式，通过发出点击声（类似于 Geiger Counter）使 React 性能“可听化”，当事情运行得比期望的更久时会发出声音。

Meta 的 react-strict-dom 是 React DOM 和 StyleX 的实验性集成，用于规范化开发样式化的 React 组件，包括 web 和 native。Szymon 在这篇文章中进行了深入的讲解。

本期介绍了一篇文章，作者使用 Next.js 14 的 App Router、RSC 与 Server Action 开发表单的经验分享，其中还使用到了例如 `useFormStatus`, `useFormState` 和 `revalidatePath` 这几个原生的 React/Next 方法。

React 团队分享了他们正在进行的工作。React 编译器的工作已经取得了进展；现在它已经在 Instagram 的生产网站上运行。我们也了解到 **React 19 即将到来**，并将包含一些破坏性的变化，特别是为了支持像 Web Components 这样的东西。一些最新的 React Canary 中的特性也将在 React 19 发布。希望五月能有好消息。

Storybook 团队希望大家可以尝试一下最新的 v8 Beta 发布。这个流行的 UI 组件工作室的最新更新为 React 开发者带来了诸多好处，包括更快的启动时间，对 RSC、Vite 5 与 Lit 3 的支持。

React Native 使用 C++ 与 JSI（RN 的原生代码 JavaScript 接口）实现了快速、内存高效的 [Trie 数据结构](https

本期介绍了一篇文章，作者在里面聊了聊他认为在 2024 年应该如何开始一个 React 项目，包括 Vite、Astro 与 Next.js，并且已经不再包括过时的 create-react-app。

Glide Data Grid 是基于 Canvas 实现的用于处理大型数据集的数据网格。最新的 v6.0 版本添加了所谓“动力学超级滚动”，以在 iOS 上获得更平滑的体验，包括进行大型更新时的性能改进等等。它的速度非常快，甚至可以实时渲染 DOOM！

上个月，Dan 思考了抽象、命名和代码转换。最近他又发表了一篇文章，提出了组件应该在客户端渲染（或者不渲染）的论点和反论点。目标是让开发者思考服务器和客户端之间常常重叠的角色，并且他成功地做到了这一点，令人钦佩的是，在整篇文章中没有提到 RSC。

Tailwind CSS 的团队并不满足于将我们所有人都置于基于类的样式规则之下，他们已经推出了一个新的、包含了所有必要元素的基于组件的 React 应用 UI 套件。它建立在 Headless UI 的早期工作之上，并且目前是其商业 Tailwind UI 产品的一部分。

生成式 AI 驱动的组件创造器 v0 在发布时就万众瞩目，如今 Vercel 已经取消了等待名单，允许所有用户直接使用。

Million 是一个快速、轻量级的虚拟 DOM，使 React 的速度提升高达 70%。v3 具有更快的构建时间、更快的运行时……因此 Million 已经很快了，现在它甚至可以更快速！

Mark 统一发布了 Redux、React-Redux、Redux Toolkit 与 Reselect 的最新主要版本。这次更新包括了许多新功能、性能改进、更小的捆绑包大小以及废弃功能的移除。RTK v2.0 与 Redux v5.0 迁移指南详细介绍了这些变化。

Tamagui 是一套完整的用于跨平台 React 应用程序（web 和 native）的 UI 解决方案。通过智能编译器使用高度平台优化的输出。它可能会给你 Tailwind CSS 的感觉，但所提供的远不止如此。

Mark Erikson 推出了三个项目的初始发布版本：Redux Toolkit v2.0、Redux v5.0 与 React-Redux v9.0。它们具有更好的打包和更小的捆绑大小，还增加了几个新功能、Immer10 也有了更好的性能和更好的 TypeScript 类型。预计未来几周会发布正式版。

在最近的 React Advanced 会议上，Mark 简单介绍了最新的也许是最有争议的 React 功能——服务器组件，并对涉及的各部分及其如何配合工作进行了很好的解释。

React 将为生产构建产物提供源映射，这将增强在生产环境中的潜在调试体验。现在可以在 canary 版本中体验。

上周在 Next.js Conf 上揭晓的 Next v14 中的一些小特性如稳定的服务器操作以及可能带来的开发方式的改变在社交媒体上引起了大量的讨论。Turbopack 现在也比以前更快了，并且部分预渲染功能正在预览，允许动态和个性化的响应，同时保持初始静态响应的速度。

现在可以在 React Canary 发布中通过 `'use server'` 使用服务器操作。React 团队发布推文宣布在最新发布的 React Canary 版本中可以使用服务器操作和和客户端操作。它提供一种在服务端运行与组件一同创建的函数的方法，并且现在已经准备好被第三方库和框架采用，React 团队也将在发布稳定版本之前寻求更多的反馈。

React 核心团队成员在两周前的 React India 大会上深入探讨了为什么 React 的模型非常适合编译器和静态分析工具的定位，以及 React 团队为什么要构建编译器，也就是一直以来备受期待的 React Forget。

本期介绍了一篇文章，其对 Next.js 与 Remix 这两个流行框架进行了功能点对比，也对它们之间的相似性和差异进行了深入探讨。

单元测试通常用于测试应用程序的逻辑，但是无法处理前端组件渲染错误的问题。而这正是可视化回归测试发挥作用的时候，Docusaurus 项目的杰出贡献者 Sébastien 分享了一套使用 GitHub Actions、Playwright 和 Argos（一款商业工具，但对于本任务来说，免费功能就够用了）来实现可视化回归测试的工作流。

对于这个流行的 React 框架而言，Next v13.5 的新功能没有那么丰富。但此次版本发布将使开发者受益于更快的 HRM 和本地服务器启动，以及 40% 更低的内存使用率。除此之外，对 Turbopack 的集成也得到了改进。

React 服务器组件在今年引起了大量的关注，Dan Abramov 甚至创建了一篇有些技术性的《从零开始重新实现 RSC 的指南》以深入理解这个概念。然而，这篇文章以易于理解的方式揭示了 RSC 是什么，为什么它们重要，以及它们带来的机会。

本期周刊涵盖了一篇文章，它介绍了在 React 应用程序中为什么需要自动化测试，如何在其中运行，又应该测试什么。除此之外，Andrei 也发表了一篇文章介绍 React 并发模式的背后机制。

一些人注意到官方 React 文档没有提供有关在 React 中使用 TypeScript 的详细信息，因此 Mark Erikson 提出了一个 issue。现在，感谢 Orta Therox，这个问题得到了解决！

如果让你用 React 构建一个通用的设计系统，并可以在任何 web 应用或框架中使用，应该怎么做？本期周刊有一篇文章或许将会告诉你答案。

如果你认为 React 服务器组件的概念难以理解，同时也曾被 Dan Abramov 的介绍文章劝退的话，可以看看本期中 Alice 的新文章。这篇文章提供了一个高维度的解释，将帮助你了解 React 服务器组件解决了什么问题、为什么需要使用它们，以及 Next.js 如何让它们更易于使用。

在 Twitter/X 上，Dan Abramov 分享了他即将离开 Meta 的消息。由于 Dan 现在已经并不常常编写 React 代码，因此 React 不会受到负面影响。Dan 已经完成了他想做的关键事情，同时一个更广泛的社区领导团队正在很好地形成。Dan 也会作为独立的第三方继续留在 React 团队。

如果你一直没有关注 React 在并发渲染、过渡效果、Suspense 以及 React 服务器组件方面的进展，可以看看来自 Vercel 的 Lydia 的这篇文章。这篇文章是一个很好的回顾和入门指南，可以帮助你了解这些功能是如何提高性能的。

Matt Kruse 发表了一篇文章，展现了他的摸索经历，并介绍了如何在 Next.js 13 中使用 React 服务器组件。

React YouTuber 之王 Jack 暂时离开他通常的屏幕演示形式，与 Redux 维护者 Mark Erikson 坐下来讨论 Redux 和 Redux Toolkit 的当前状态和未来状态，两者都离重大新版本不远了。

React Jam：面向 React 开发者的 Gamejam，Dan Abramov 在编程讨论中感到疲倦，使用 Vitest 测试 React Hooks 的技巧。

加上一个棋盘组件，7分钟的 RSC 视频，以及第一份 React 工作所需要的知识。

为什么使用了 React 服务端组件，客户端组件仍然可以被 SSR 成 HTML？Planetscale 的创始人 Aaron Francis 最近谈到了完成项目的挑战和克服发布恐惧的重要性，他强调了拥抱项目最后 10% 的磨炼的重要性。

Dan 决定写一系列文章，从零开始重新实现一个基本形式的 RSC；除此之外，Jack Herrington 发布了一条视频，探讨了服务器组件是否将 React 变成了 PHP。

提供一种测试你的 React 技能的方法，一组服务端安全的 hooks，以及让组件跟随你的指针移动。

介绍一个内置丰富功能的多合一框架：The Epic Stack；你可能不需要 React Query；如何开发一个自定义的 debounce Hook。

介绍另一款状态管理库 - Legend-State；Vercel 平台的替代方案；React + TypeScript 学习路径。

除了离开和重新回到 React，还有 Next.js 的新 App Router、树状图组件和可视化组件运行情况的方法。

Vercel 新推出了一套优秀的存储方案；为生产准备的应用提供可扩展的架构；究竟什么是 React 服务器组件？

React Router 6 的九小时探究；Create React App 的现代替代方案；使用 React Server Components 在博客上显示访问计数器。

Storybook v7 发布、Next app 路由可视化、Tailwind CSS + React 落地页模板。

Next.js 发布了 v13.3；一个关于 React 18 新功能的 PPT；将 Three.js 和 React 结合 WebXR 一起使用。

React Chrono v2 发布，这款受欢迎的组件经历了完整重构。使用该组件可以在垂直、水平或垂直交替方向上呈现主题化的时间轴。

React Core Team 发布了幕后花絮，展示了 React 项目正在进行的工作；除此之外，Rem 认为 React 已经从一个简单的库发展成为一个全面的架构，因而最佳实践也必须不断演进。

在 2023 年如何启动一个 React 项目；回顾 React Hook 诞生的历史。

关于 React 服务端组件的一些激烈讨论；认识 React.js 核心团队成员；20 分钟内实现 Jotai 的状态管理核心逻辑。

Mantine v6.0 发布；在 Figma 中将图标导出成 React 组件；本地优先应用的 hooks。

用成熟的 UI 模式对 React 应用进行模块化；Next.js 发布了 13.2 版本。

如何避免棘手的异步状态管理器陷阱；2023 年对 Vue 的期待以及它与 React 的不同之处；检测不必要的 React 组件挂载

State of React Native 结果出炉；React 手风琴组件；加菲猫出场

高效的高阶组件；深入理解 Next.js 应用的目录架构；

Netlify 收购 Gatsby；处理 Web 组件错误的最佳实践；一种使你的 React 测试更易于编写、理解和维护的方法；

Expo Router v1.0 RC 版本发布，另一个 React 组件库，Josh Comeau 的新 React 课程

为什么我的 Jest 测试套件变慢了？；用 React Hook Form 和 Zod 构建表单

可交互的 React 数学公式组件；关于 React 并发“模式”的一切；React 中的数据绑定

Next.js v13.1、Storybook v7.0 beta 发布；使用 ChatGPT 作为 Reducer；以及一系列库的更新

因此，我们将介绍今年的热门项目、热门视频和热门代码/工具。

常见的 `useState` 陷阱；React Native 业务项目的迁移重构；React 生态的可视化路线图

向你介绍 Codux：Wix 出品的 React 可视化 IDE；《React.js 纪录片》预告

在 React 应用中嵌入 Unity WebGL；给 React 开发者的一篇 CSS 变量教程

Deno 添加原生 npm 包的支持; 在 React 应用中使用字典, 链表, 队列等数据结构的真实案例

React 是否受 Meta 裁员影响？；重构 React 代码：减少 43% 代码并且数据结构更加清晰

这里有一封来自 Phoenix 的作者写给 React 的情书；同时，Gatsby v5.0 发布：迄今为止最快的 Gatsby。

基于 Amplify Studio 使用少量代码实现 Figma-to-React 组件；Storybook Test Runner 生成代码覆盖率报告

Vercel 在 Next.js Conf 发布 Next.js 13，新版本添加了全新的字体系统、开始支持 `app/` 目录等功能。

从 React 迁移至 htmx 的真实案例；我们从迁移到 Recoil.js 中学到了什么？

React Table 无头表格组件；在 React 中使用 HTML 语义化标签的技巧

Billboard.js v3.6 发布，最新版本新增了官方 React 包装器和一个新的线性渐变条形图选项。

使用 React-Form 来管理 React 表单状态；如何掌握 React Hooks

利用 react-router 的 useSearchParams hook 将状态存储在URL中；详解 React 中的记忆（Memoization）功能

用一个实际的例子从头到尾介绍如何使用 `useSyncExternalStore`

Next.js Conf 2022 官宣了；React Native 发布了 v0.70 版本；BenchSci 是如何将其旗舰应用迁移到 Next.js 的？

解析常用 React Hooks 的确切使用场景; 详细阐明 React 错误边界的使用方式

如果你想要使 React 应用获得最好的性能，那么理解和正确处理渲染过程是非常重要的

Cloudscape：出自 AWS 的设计体系；如何用 React 结合 Ruby on Rails；使用 GitHub Actions 将 React 应用程序部署到 S3 的分步指南。

静态网站生成器 Docusaurus 2.0 发布；React 自定义网格组件性能优化实战。

一位拥有 8 年经验（几乎和 React 诞生的时间一样长）的 React 开发人员分享了他在 8 年后如何编写 React；Mantine v5.0 发布，这是一个功能完善的 React 组件库。

使用 Fresh 打造快捷的 React 应用；介绍几个相对冷门的 React Hook；在 TypeScript 中使用 React 的 “useRef”；在“localStorage”中存储状态。

Yelp 以往使用 React Styleguidist 作为组件开发环境，但是发现迁移到 Storybook 之后有更全面的开发体验提升；React New York 活动将于 9 月 9 日举办。