React 综合指南

react 19 来了！ ? 在本文中，我们将探索 react 19 中的新功能和改进。让我们开始吧！

react 19 的新增功能

react 19 是 react 团队的最新主要版本，具有多项突破性功能和增强功能，旨在使开发过程更加高效，并使生成的应用程序更快、更强大。该版本继续建立在其前身奠定的坚实基础上，对核心框架进行了重大更新。在这篇博客中，我们将探索 react 19 的主要功能，包括新的 react 编译器、服务器组件和服务器操作、新的钩子和 api 等等！

反应编译器

react 19 中最令人兴奋的功能之一是新的 react 编译器，也称为 react fizz。该编译器旨在通过生成高效的 javascript 代码来优化 react 应用程序的性能。 react 编译器将您的 jsx 和 javascript 代码转换为高度优化的 javascript，可以更快地执行、更好的内存使用和更少的开销。这仍处于实验模式，但它是一个很有前途的功能，可能会改变 react 开发人员的游戏规则。它使用纯 javascript，并理解 react 规则，因此您无需重写任何代码即可使用它。

编译器是做什么的？

为了优化应用程序，react compiler 自动记忆组件和钩子，并且还优化了渲染过程。这意味着react只会重新渲染实际发生变化的组件，而不是重新渲染整个组件树。这可以带来显着的性能提升，特别是对于大型和复杂的应用程序。

如果您的代码库已经被很好地记住了，您可能不会期望看到编译器的重大性能改进。然而，在实践中，手动记住导致性能问题的正确依赖关系是很棘手的。编译器可以帮助你。

编译器假设什么？

react 编译器假设你的代码：

• 是有效的、语义的 javascript
• 在访问可空/可选值和属性之前测试它们是否已定义（例如，如果使用 typescript，则通过启用 strictnullchecks），即 if (object.nullableproperty) { object.nullableproperty.foo } 或使用可选链接 object.nullableproperty？ .foo
• 遵循 react 规则

react compiler 可以静态验证 react 的许多规则，并在检测到错误时安全地跳过编译。

服务器组件和服务器操作

服务器组件可以在构建时运行以从文件系统读取或获取静态内容，因此不需要 web 服务器。例如，您可能想从内容管理系统读取静态数据。

没有服务器的服务器组件

没有服务器组件，在客户端获取静态数据很常见，效果如下：

// bundle.js
import marked from 'marked'; // 35.9k (11.2k gzipped)
import sanitizehtml from 'sanitize-html'; // 206k (63.3k gzipped)

function page({page}) {
  const [content, setcontent] = usestate('');
  // note: loads *after* first page render.
  useeffect(() => {
    fetch(`/api/content/${page}`).then((data) => {
      setcontent(data.content);
    });
  }, [page]);

  return <div>{sanitizehtml(marked(content))}</div>;
}

使用服务器组件，您可以在构建时获取静态数据：

import marked from 'marked'; // not included in bundle
import sanitizehtml from 'sanitize-html'; // not included in bundle

async function page({page}) {
  // note: loads *during* render, when the app is built.
  const content = await file.readfile(`${page}.md`);

  return <div>{sanitizehtml(marked(content))}</div>;
}

渲染的输出可以被缓存并静态提供，因此服务器不需要运行任何 javascript。这对于性能来说是一个巨大的胜利，尤其是在移动设备上。当应用程序加载时，它可以立即显示内容，无需等待网络请求。

带有服务器的服务器组件

服务器组件也可以在服务器上运行。这对于获取非静态数据非常有用，例如特定于用户的数据或经常更改的数据。例如，您可能想从数据库中获取特定于用户的数据，这通常是通过使用 useeffect 挂钩来实现的：

// bundle.js
function note({id}) {
  const [note, setnote] = usestate('');
  // note: loads *after* first render.
  useeffect(() => {
    fetch(`/api/notes/${id}`).then(data => {
      setnote(data.note);
    });
  }, [id]);

  return (
    <div>
      <author id="{note.authorid}"></author><p>{note}</p>
    </div>
  );
}

function author({id}) {
  const [author, setauthor] = usestate('');
  // note: loads *after* note renders.
  // causing an expensive client-server waterfall.
  useeffect(() => {
    fetch(`/api/authors/${id}`).then(data => {
      setauthor(data.author);
    });
  }, [id]);

  return <span>by: {author.name}</span>;
}

使用服务器组件，您可以读取数据并在组件中渲染：

import db from './database';

async function note({id}) {
  // note: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <author id="{note.authorid}"></author><p>{note}</p>
    </div>
  );
}

async function author({id}) {
  // note: loads *after* note,
  // but is fast if data is co-located.
  const author = await db.authors.get(id);
  return <span>by: {author.name}</span>;
}

服务器组件可以通过从服务器重新获取它们来动态化，它们可以在服务器上访问数据并再次渲染。这种新的应用程序架构结合了以服务器为中心的多页面应用程序的简单“请求/响应”心理模型与以客户端为中心的单页应用程序的无缝交互性，为您提供两全其美的优势。

服务器操作

当使用“use server”指令定义服务器操作时，您的框架将自动创建对服务器函数的引用，并将该引用传递给客户端组件。当客户端调用该函数时，react 会向服务器发送请求来执行该函数，并返回结果。

服务器操作可以在服务器组件中创建并作为道具传递给客户端组件，也可以在客户端组件中导入和使用。

从服务器组件创建服务器操作：

// server component
import button from './button';

function emptynote () {
  async function createnoteaction() {
    // server action
    'use server';

    await db.notes.create();
  }

  return <button onclick="{createnoteaction}/">;
}
</button>

当 react 渲染 emptynote 服务器组件时，它将创建对 createnoteaction 函数的引用，并将该引用传递给 button 客户端组件。单击按钮时，react 将向服务器发送请求以执行 createnoteaction 函数，并提供参考：

"use client";

export default function button({onclick}) { 
  console.log(onclick); 
  return <button onclick="{onclick}">create empty note</button>
}

在客户端组件中导入和使用服务器操作：

客户端组件可以从使用“use server”指令的文件导入服务器操作：

"use server";

export async function createnoteaction() {
  await db.notes.create();
}

当捆绑器构建 emptynote 客户端组件时，它将在捆绑包中创建对 createnoteaction 函数的引用。单击按钮时，react 将向服务器发送请求，以使用提供的引用执行 createnoteaction 函数：

"use client";
import {createnoteaction} from './actions';

function emptynote() {
  console.log(createnoteaction);
  // {$$typeof: symbol.for("react.server.reference"), $$id: 'createnoteaction'}
  <button onclick="{createnoteaction}"></button>
}

新的 hook 和 api

除了 react 编译器和服务器组件之外，react 19 还引入了几个新的钩子和 api，可以更轻松地构建复杂的应用程序。

使用乐观

useoptimistic 钩子允许您在服务器响应之前乐观地更新 ui。这可以让您的应用程序感觉更具响应性并减少感知的延迟。该钩子采用执行乐观更新的回调函数，以及指定乐观更新后要发送的服务器请求的可选配置对象。

使用表单状态

useformstatus 钩子允许您跟踪表单的状态，例如它是原始的、脏的、有效的还是无效的。这对于向用户显示反馈非常有用，例如错误消息或成功消息。

使用表单状态

useformstate 钩子允许您管理表单的状态，例如表单字段的值和表单的有效性。这对于构建具有动态验证逻辑的复杂表单非常有用。

这个钩子需要两个参数：初始表单状态和验证函数。验证函数将表单状态作为输入，并返回一个包含每个表单字段有效性的对象。

新使用api

react 19 引入了一种新的使用 api，它是从 promises 或上下文等资源中读取值的通用方法。 use api 与 useeffect 挂钩类似，但它不采用回调函数。相反，它返回资源的值，并在值发生变化时重新渲染组件。

const value = use(resource);

示例：

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

结论 – 你应该升级到 react 19 吗？

react 19 是一个主要版本，为核心框架引入了多项突破性功能和增强功能。新的 react 编译器、服务器组件和服务器操作旨在使开发过程更加高效，并使生成的应用程序更快、更强大。新的挂钩和 api 可以更轻松地构建复杂的应用程序并改善用户体验。如果您已经在使用 react，那么升级到 react 19 绝对值得考虑。

但同时需要注意的是，react 19 仍处于实验模式，某些功能可能会在最终发布之前发生变化。建议在升级之前在非生产环境中使用 react 19 测试您的应用程序。如果您要开始一个新项目，react 19 是一个不错的选择，因为它为构建现代 web 应用程序提供了坚实的基础。