你的代码库准备好 React 19 了吗 | TinyShare前端技术分享

React 自 2013 年首次亮相以来已经走过了很长的路，最初是一个用于构建用户界面的客户端 JavaScript 库。

我回想起当 Create React App 是新 React 项目的起点，React 严格是一个客户端 JavaScript 库的时候。那是在生命周期方法被抽象成 Hooks 之前，也是在 React Server Components 出现之前的时代！

现在我们准备迎接它的第 19 个版本。

React 19 中有什么新内容？

React 19 还没有发布日期，但让我们看看即将到来的内容，并讨论如何为我们的代码库准备这个未来的发布。

告别这些 API

Andrew Clark 关于 React 19 的推文

我们都看到了 Andrew Clark (@acdlite 在 Twitter 上) 现在著名的推文，讨论了 React 19 中的 API 更改。看来我们将不得不告别一些我们过去熟悉和喜爱的 API：

像 useMemo、useCallback 和 memoization 这样的 Hooks 将通过 React Compiler 自动优化处理；
forwardRef 将变得过时，因为 ref 将变成一个 prop！
像 useContext 这样的 Hooks 将被 use hook 替换，它更灵活，允许你读取 Promises 或 Context 的值，并简化了从服务器向客户端发送 promise 的过程；
use 钩子还可以处理被拒绝的 Promises，消除了 throw(Promise) 的需要；
Context.Provider 将被一个更简单的签名替换：Context。

值得查看 React 文档以获取有关这些功能的更多信息，因为它们正在开发和测试中，并与 Canary releases 一起使用。

React Canary

Canary 发布用于提前宣布新的和破坏性的变化。尽管有争议，但 Canary 发布可以在生产中使用，并且已经用于像 Next.js 这样的框架的开发。

如果您使用的是像 Next.js 这样的框架，最好的准备方式是留意新更新、发布和博客文章。随着新特性和破坏性变化从 Canary 发布逐渐进入 Next.js，您将是第一个知道的人，并且将有充足的时间对您的代码库进行更改。

React Compiler

有时 React 在状态改变时重新渲染了太多东西。React Compiler 将被设置为“尽可能多的代码开箱即用”，通过强制执行 JavaScript 和 React 的规则，并在状态改变时自动重新渲染 UI 的正确部分。

我们的目标是，最终，手动记忆化将成为过去；像 useMemo 和 useCallback 这样的 Memo APIs 将由 React Compiler 本身处理。

如果您想尽快拥抱 React Compiler 的好处，一旦它发布，React 团队建议启用严格模式并使用 React 的 ESLint 插件来为未来保护您的代码。我不知道这是否会包含在 React 19 中，但值得一提的是。

React Server Actions

不要与 Remix 中的 Route Actions 混淆，Server Actions 的目标是使从客户端向服务器发送数据变得更容易。Action 在客户端或服务器上同步和异步工作。

当使用 Actions 时，React 将处理数据提交的生命周期，为您提供像 useFormStatus 和 useFormState 这样的钩子，以访问表单操作的当前状态和响应。

Actions 在过渡期间提交：

useTransition 是一个钩子，允许您更新状态而不阻塞 UI。
useOptimistic 是一个钩子，将允许进行乐观的状态更新，当 Action 完成后将被撤销。

大多数开发应用程序或产品的开发人员在准备 Actions 方面不需要做任何事情。然而，React 核心团队期望库作者将为他们自己的组件 API 实现自定义的 action props。

React 19 其他变化

如果您已经使用过 Next.js，您已经熟悉了指示组件应该在客户端还是服务器上渲染的指令。指令旨在在全栈 React 框架中使用，所以如果您还没有使用过它们，您应该熟悉它们。

React 19 还将带来支持在组件树的任何位置渲染 title、meta 和 link 标签。

最后，对于资产加载，我们将拥有新的资源加载 API，以便更好地控制何时加载和初始化资源。

Activity（以前称为 Offscreen）

以前，如果我们想要隐藏或显示组件，我们有两个选项：

完全将组件（从 DOM 树中）添加（挂载）或移除（卸载），每次我们卸载时都会丢失状态；
保持组件挂载并使用 CSS 切换其外观，以性能成本为代价。

Activity 的目标是通过在视觉上隐藏 UI 同时降低其内容的优先级来解决这个问题。这个功能仍在研究中，但很快我们将能够将某些组件标记为“活动”或“非活动”，在减少性能成本的同时保持它们挂载（和状态）。

React 19 破坏性变化

有消息称 React 将破坏 WebAssembly 组件，但在我们知道到底会发生什么之前，我们需要从 React 核心团队那里获得更多信息。

你的应用准备好 React 19 了吗？

现在，当您知道在将应用程序升级到 React 19 时可以期待什么，哪些变化将对您产生最大影响？你对什么最兴奋？

我希望你对 React 19 像我一样兴奋！如果您有任何问题，请随时联系。

请注意，由于原文中包含了一些链接和特定的 Markdown 格式化（如代码块和标题），我在翻译时保留了这些格式，并尽可能地保持了原文的意图和语境。