react 是用于构建用户界面的流行 javascript 库，随着每个新版本的发布而不断发展。在这篇博文中，我们将探讨 react 18 和即将推出的 react 19（目前处于候选发布阶段）之间的主要区别，提供新功能示例，并为使用 react 和 vite 的开发人员提供迁移技巧。

目录

简介react 19 的当前状态与示例的主要区别改进的服务器端渲染增强的并发渲染新的 hook 和 api性能优化迁移技巧将 react 19 rc 与 vite 结合使用结论

介绍

react 18 引入了重大变化，包括自动批处理、用于并发渲染的新 api 和过渡。 react 19 虽然仍在开发中，但旨在在这些基础上进行进一步的改进和新功能。

react 19 的现状

截至 2024 年 9 月，react 19 处于候选发布 (rc) 阶段。它功能齐全，可以进行测试，但尚未建议用于生产使用。在最终版本发布之前，功能和 api 仍可能发生变化。

与示例的主要区别

让我们深入了解 react 19 中预期的关键改进和新功能，并在适用的情况下与 react 18 进行示例和比较。

改进的服务器端渲染

增强型流式 ssr

react 19 旨在进一步优化流式 ssr。虽然 api 可能仍然与 react 18 类似，但性能改进应该是显而易见的。

示例（react 18 和 19 中类似）：

// server.jsimport { rendertopipeablestream } from 'react-dom/server';app.get('/', (req, res) => {  const { pipe } = rendertopipeablestream(, {    bootstrapscripts: ['/client.js'],    onshellready() {      res.statuscode = 200;      res.setheader('content-type', 'text/html');      pipe(res);    },  });});

登录后复制精致选择性补水

react 19 有望改进 react 18 中引入的选择性水合作用。

react 19 中的示例（语法可能与 react 18 类似，但行为有所改进）：

import { suspense } from 'react';function app() {  return (    <suspense fallback={}>            <suspense fallback={}>                    );}

登录后复制

在此示例中，react 19 可能会提供更平滑的水合作用，在侧边栏加载时优先考虑 maincontent 组件。

服务器组件

react 19 预计将包含更稳定的服务器组件实现。

react 19 中的服务器组件示例：

// note: this syntax is speculative and may change'use server';import { db } from './database';async function userprofile({ userid }) {  const user = await db.user.findunique({ where: { id: userid } });  return 
{user.name}
;}export default userprofile;

登录后复制

在此示例中，userprofile 组件在服务器上运行，允许直接访问数据库，而无需向客户端暴露敏感信息。

增强的并发渲染

增强悬念

react 19 正在通过更好的回退处理来增强 suspense 组件。

react 18 示例：

function profilepage({ userid }) {  return (    <suspense fallback={
loading profile...
}>            <suspense fallback={
loading posts...
}>                    );}

登录后复制

潜在的 react 19 改进（推测）：

function profilepage({ userid }) {  return (    <suspense      fallback={
loading profile...
}      primarycontent={}    >            );}

登录后复制

在这个推测性的 react 19 示例中，primarycontent 属性可能允许开发人员指定在加载过程中应优先考虑哪些内容。

扩展自动渲染批处理

react 18 引入了 setstate 和 hooks 的自动批处理。 react 19 可能会将其扩展到更多场景。

react 18 示例：

function counter() {  const [count, setcount] = usestate(0);  function handleclick() {    setcount(c => c + 1); // does not re-render yet    setcount(c => c + 1); // does not re-render yet    // react will only re-render once at the end (that's batching!)  }  return {count};}

登录后复制

react 19 可能会将这种批处理扩展到更多场景，可能包括异步操作。

微调的基于优先级的渲染

react 19 可能会引入对渲染优先级更精细的控制。

潜在的 react 19 示例（推测）：

import { usedeferredvalue, starttransition } from 'react';function searchresults({ query }) {  const deferredquery = usedeferredvalue(query);  return (          
searching for: {query}
      <suspense fallback={}>                   {    setsearchquery(input);  });}

登录后复制

在此示例中，react 19 可能会提供更细粒度的控制，以控制 ui 的不同部分如何更新以响应用户输入。

新的 hook 和 api

使用事件挂钩

react 19 预计将引入 useevent hook 来解​​决过时的闭包问题。

react 18 题：

function chatroom({ roomid }) {  const [message, setmessage] = usestate('');  function handlesend() {    // this might use a stale `roomid` if the component re-renders    sendmessage(roomid, message);  }  return send;}

登录后复制

使用 useevent 的潜在 react 19 解决方案：

function chatroom({ roomid }) {  const [message, setmessage] = usestate('');  const handlesend = useevent(() => {    // this will always use the current `roomid`    sendmessage(roomid, message);  });  return send;}

登录后复制改进的上下文 api

react 19 可能会对 context api 进行改进，以解决性能问题。

react 18 示例：

const themecontext = react.createcontext('light');function app() {  const [theme, settheme] = usestate('light');  return (          
      
      

登录后复制

潜在的 react 19 改进（推测）：

const themecontext = react.createcontext('light', (prev, next) => prev === next);function app() {  const [theme, settheme] = usestate('light');  return (          
      
      

登录后复制

在此推测性示例中，上下文可能包含比较函数以防止不必要的重新渲染。

性能优化

虽然许多性能优化发生在幕后，但有些可能对开发人员可见：

改进的比较算法

react 19 预计将优化对账流程。这可能不需要更改您的代码，但可能会加快复杂 ui 的更新速度。

内存使用改进

react 19 可能包括减少内存使用的优化。同样，这可能不需要更改代码，但可以提高性能，特别是对于大型应用程序。

更好的摇树

react 19 可能会提高树摇动能力。当使用 vite 等构建工具时，这可能会导致包大小更小。

可能更好地利用 react 19 的 tree shake 的 vite.config.js 示例：

import { defineconfig } from 'vite'import react from '@vitejs/plugin-react'export default defineconfig({  plugins: [react()],  build: {    rollupoptions: {      output: {        manualchunks(id) {          if (id.includes('node_modules')) {            return 'vendor';          }        }      }    }  }})

登录后复制

迁移技巧

随时了解情况：关注官方 react 博客和文档以获取更新。非生产环境中的实验：在开发或登台环境中尝试 react 19 rc。查看已弃用的 api：检查文档中是否有任何已弃用的 api，并相应地计划更新。逐步利用新功能：首先在应用程序的非关键部分实现新功能。优化渲染：检查组件结构和 suspense 边界的使用。全面测试：彻底测试您的应用程序，尤其是依赖 react 内部 api 的区域。

将 react 19 rc 与 vite 结合使用

使用 vite 试验 react 19 release candidate：

创建一个新的vite项目：

   npm create vite@latest my-react-19-rc-app -- --template react

登录后复制导航到项目目录：

   cd my-react-19-rc-app

登录后复制安装 react 19 rc 版本：

   npm install react@rc react-dom@rc

登录后复制更新你的 vite.config.js：

   import { defineconfig } from 'vite'   import react from '@vitejs/plugin-react'   export default defineconfig({     plugins: [react()],     esbuild: {       jsxinject: `import react from 'react'`     },     optimizedeps: {       include: ['react', 'react-dom']     }   })

登录后复制启动开发服务器：

   npm run dev

登录后复制

请记住，不建议在生产中使用 rc 版本。

结论

虽然 react 19 仍处于候选版本阶段，但它承诺了令人兴奋的改进和新功能。从增强的服务器端渲染到新的钩子和性能优化，react 19 有很多值得探索的地方。

随着发布日期的临近，请继续关注 react 官方文档和社区资源以获取最新信息。通过随时了解情况并在新功能稳定后逐步采用它们，您将能够在您的项目中充分利用 react 19 中的改进。

以上就是React 与 React (RC)：主要区别和迁移技巧与示例的详细内容，更多请关注【创想鸟】其它相关文章！