我要投稿

React 综合指南

资讯主编 web前端

2024-08-07 0 447

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(() =&gt; {
    fetch(`/api/content/${page}`).then((data) =&gt; {
      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(() =&gt; {
    fetch(`/api/notes/${id}`).then(data =&gt; {
      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(() =&gt; {
    fetch(`/api/authors/${id}`).then(data =&gt; {
      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 挂钩类似，但它不采用回调函数。相反，它返回资源的值，并在值发生变化时重新渲染组件。

1	`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 应用程序提供了坚实的基础。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明
1. 本站所有资源来源于用户上传和网络等，如有侵权请邮件联系本站整改team@lcwl.fun！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系本站工作人员处理！
6. 本站资源售价或VIP只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压，如遇到无法解压的请联系管理员！
8. 因人力时间成本问题，部分源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的，保证每个源码都可以正常搭建，但不保证源码内功能都完全可用，源码属于可复制的产品，无任何理由退款！

网站搭建学习网 web前端 React 综合指南 https://www.xuezuoweb.com/9788.html