被严重低估！React 19 又是一次开发方式的变革，useEffect 将逐渐退出历史舞台

React 团队将在5天后举办 React conf，届时，React 19 正式版应该会发布。这个时间点，距离 React 18 正式发布已经过去了整整两年。

虽然，React 19 还没有正式发布，但我们已经可以在 npm 上下载 React 19 的 beta 版本。

目前，React 19 的文章有很多，但写到点子上的并不多。即使官方文档也只是简单地罗列新增的 hook 和特性，并没有进一步说明这些 hook 背后代表的含义，以及其最佳实践是什么，以至于期待 React 19 的人也并不是很多。

但是，我要告诉大家的是，我们都严重低估了 React 19。

React 19 的 beta 版在 npm 上可用之后，我就创建了一个项目，把 React 新增的特性都使用了一遍。如下图所示。

我用新的开发方式，将在项目开发中可能遇到的情况都实现了一遍。写完十几个案例之后，我的感受就是：

我们的开发方式，又要迎来一次重大升级了。新的 hook 真的太好用了。

和 React 之前的版本相比，React 19 主要在性能和开发体验两个方面带来了显著的提升。

01

性能

最近几年，许多前端框架纷纷拥抱基于 Signal 的细粒度更新，在特定场景有接近原生开发的性能体验，把前端框架的性能问题推上了风口浪尖。React 基于 Fiber 的 Diff 更新则成为最大的缺陷与短板。大量冗余 re-render 造成的性能损耗，是 React 不得不面对的挑战。

注：细粒度更新并非所有场景都具有明显的优势，也不要完全相信框架而忽视掌握性能优化技能的重要性

虽然，React 提供了 memo/useMemo/useCallback 帮助开发者优化项目性能。但其学习成本并不低，想要在项目中得心应手地使用更是不易。许多团队并没有理解它们，存在滥用的情况。

在这样的背景之下，React 19 即将推出的 React Compiler，允许在开发者不调整任何代码的情况下，自动优化项目性能。

React Compiler 支持在不使用 memo/useMemo/useCallback 的情况下，方便地处理项目 re-render 的问题。项目最终只会在需要更新的地方 re-render。

最重要的是，React Compiler 编译之后，代码不会改变现有渲染机制，而是在已有机制下完成对项目的优化。React Compiler 的愿景非常庞大，它希望在兼顾大量老项目的情况下，实现项目性能优化。因此，与提出新的解决方案相比，它的开发难度更大。破坏性更新更加容易，但对于开发者和大量老项目而言，这是一种严重的伤害。React Compiler 选择了最难搞的更新方式。

与依赖追踪的细粒度更新不同，React Compiler 通过记忆的方式，让组件更新只发生在需要更新的组件，从而减少大量 re-render 的组件。

注意，React Compiler 并非全能，如果代码过于灵活，无法提前预判执行行为，那么，React Compiler 将跳过这一部分的优化。因此，最好在项目中引入严格模式，在严格模式的指导下完成的开发，基本在 React Compiler 的辐射范围之内。

02

开发体验

与性能提升相比，React 19 将迎来开发体验的重大提升。毕竟，没有 React Compiler，我自己也能优化项目性能。

开发体验的提升主要体现在，React 19 之后，我们可能不再需要 useEffect 了。

useEffect 是一个功能强大的 hook，但同时，它又是最难驾驭的 hook，如果对它的使用理解不够，可能会因为滥用 useEffect 而导致项目失控。包括大家讨论最多的闭包问题，也往往跟它有关。其中，最考验开发者水平的，是对于 useEffect 依赖项的正确处理。

React 19 的大部分更新几乎都是围绕如何在开发中尽量不用或少用 useEffect 展开。在之前的项目开发中，useEffect 是处理异步问题必须使用的重要 hook 之一，它几乎存在于每个页面组件中。

React 19 引入了新的 hook，允许在处理异步开发时，不再需要 useEffect，从而极大地改变开发方式。

除此之外，React 19 想要彻底改变在项目开发中的 UI 交互方式。对于 React 19，Suspense、ErrorBoundary、Action 的重要性将变得越来越高。

虽然，早在 React 18 中就能使用 Suspense、ErrorBoundary，但由于异步请求方案的不成熟，它们并没有得到普及，包括 React 官档也并没有进一步说明如何触发 Suspense 的回调机制。因此，它们只是小范围地被一些顶尖的前端开发使用。

<Suspense fallback={<div>loading...</div>}>
  <List api={__api} />
</Suspense>

React 19 之后，它们将会得到普及。这将进一步深化组件解释一切的开发思想。

03

React Server Components

React Server Components （以下简称为“RSC”）是 React 在探索前端边界的又一次突破性创举。RSC 是一种新概念组件，支持在构建时运行一次组件，以提高页面的渲染速度。

预渲染、增量渲染、流式传输等概念对提高大型复杂项目的用户体验有非常大的帮助，而且，RSC 已经在 Next.js 中得到落地实践。目前，已经有大量开发者在使用 Next.js，即便 React 官方都在其网站首页推荐大家使用 Next.js 开发 React 项目。

04

新的架构思维

React 19 之前，React 高手与普通开发者之间，开发的项目无论是从性能上、还是从代码优雅上差距都非常大。因此，不同的人对于 React 的感受完全不一样。

React 19 则借由推出一些新的 hook，暗中传递一种框架思维「最佳实践」，这将会极大地拉近普通开发者与顶尖高手之间的差距。对于大多数 React 开发者而言，这会是一个极大的提升。

这一意图在 React 新的官方文档与 Next.js 中体现得非常明显。

这一最佳实践主要围绕如何改进异步编程的开发体验而展开。

例如，当想要实现如下效果时。

在项目开发中，新页面渲染时请求一个接口的场景非常常见。新的架构思维的开发代码如下所示。

注意，该案例没有引入任何三方库。

首先，定义一个 API 用于请求数据。

const api = async () => {
  const res = await fetch('https://api.chucknorris.io/jokes/random')
  return res.json()
}

然后，创建一个函数组件，并执行该 API。

export default function Index() {
  const __api = api()
  return (
    <div>
      <div id='tips'>初始化时，自动获取一条数据内容</div>
      <Suspense fallback={<div>loading...</div>}>
        <Item api={__api} />
      </Suspense>
    </div>
  )
}

最后，在子组件中，获取 API 执行之后得到的数据。

const Item = (props) => {
  const joke = use(props.api)
  return (
    <div>
      <div>{joke.value}</div>
    </div>
  )
}

大家可以感受一下新的开发方式与以前基于 useEffect 请求数据的不同之处。

注意：一套成熟架构思维，不是使用一个简单的方案解决某一个问题，而是要基于这套思维去解决项目中的绝大多数场景。因此，一定要结合大量的场景去理解一套项目架构思维。