--- theme: github --- React 上一次发布版本还要追溯到2022年6月14日，版本号是18.2.0。在大前端领域，一项热门技术更新如此缓慢属实罕见。这也引起社区里一些大佬的不满，在我的上一篇文章里有提到，感兴趣的朋友可以点击查看：[React 社区里的分歧](https://juejin.cn/post/7330602636934774823)。在社区不满的声音越来越大的背景下，React 新版本的消息终于来了。 React 团队也回应了迟迟未发布新的正式版本的质疑：此前发布到 Canary 版本的多项特性，因为这些特性是相互关联的，所以 React 团队需要投入大量时间确保它们能够协同工作，然后才能逐步发布到 Stable 版本。事实也确实如此，虽然在这将近两年的时间里 React 没有发布正式版本，但是 Canary 却有一些重磅更新，例如：`use`、`useOptimistic` hook，`use client`、`use server` 指令。这些更新客观上丰富了 React 生态系统，特别是推动了 Next.js 和 Remix 等全栈框架的高速发展。 React 团队已经确定，下一个版本将是大版本号，即版本号会是 19.0.0。 ## v19 新特性预测现在，让我们根据 React 团队最新发布的消息，来抢先学习一下 v19 版本可能正式发布的新特性。 ### 自动记忆化你是否还记得 React Conf 2021 上黄玄介绍的 React Forget？ ![react forget.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c554af1298a5485fb012ad58805cac79~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=776&h=410&s=173033&e=png&b=252930) 现在，它来了。它是一个编译器，目前已经在 instagram 的生产环境中应用，React 团队计划在 Meta 的更多平台中应用，并且未来会进行开源发布。在使用新编译器以前，我们使用 **`useMemo`**、**`useCallback`** 和 **`memo`** 来手动缓存状态，以减少不必要的重新渲染，这种实现方式虽然可行，但 React 团队认为这并不是他们认为理想的方式，他们一直寻找让 React 在状态变化时自动且只重新渲染必要部分的方案。经过多年的攻坚，现在新的编译器成功落地了。新的 React 编译器会是一个开箱即用的特性，对开发者来说是又一次开发范式的改变，这也是 v19 最让人期待的功能。好玩的是，React 团队在介绍新编译器时完全没有提到“React Forget”，这也让好事的网友爆梗了：They forget React Forget & forget to mentioned Forget in the Forget section.🤣 ### Actions React Actions 是 React 团队在探索客户端向服务器发送数据的解决方案过程中发展出来的，这个功能允许开发者向 DOM 元素（如 ` ``` action 函数可以同步或异步操作。使用 action 时，React 将为开发者管理数据提交的生命周期，我们可以通过 **`useFormStatus`** 和 **`useFormState`** 这两个 hook 来访问表单操作的当前状态和响应。 action 可以在执行数据库变更（如增加、删除、更新数据）和实现表单（如登录表单、注册表单）等**客户端到服务器交互的场景**中使用。 action 不仅可以与 **`useFormStatus`** 和 **`useFormState`** 结合使用，还可以用与 **`useOptimistic`** 和 **`use server`** 结合使用。详细展开篇幅就会很长了，你可以[关注我](https://juejin.cn/user/26044008768029)，很快我会单独写一篇文章介绍 action 的详细用法。 ### 指令：use client 与 use server **`use client`** 和 **`use server`** 两个指令在 Canary 版本发布已久，终于也要在 v19 版本里加入 Stable 版本了。此前社区频频有人因为 Next.js 在生产环境使用这两个指令而指责 Next.js 在破坏 React 生态、批评 React 团队纵容 Next.js 超前使用非稳定特性。其实大可不必，因为这两个指令就是为 Next.js 和 Remix 这样的全栈框架设计的，短期内普通开发者使用 React 开发应用几乎不会用到它们。如果你是使用 React，而不是使用全栈框架，你只需要了解这两个指令的作用即可：**`use client`** 和 **`use server`** 标记了前端和服务端两个环境的“分割点”，**`use client`** 指示打包工具生成一个 **`