React 与 React (RC)：主要区别和迁移技巧与示例

百变鹏仔 3天前 #JavaScript

文章标签示例

react 是用于构建用户界面的流行 javascript 库，随着每个新版本的发布而不断发展。在这篇博文中，我们将探讨 react 18 和即将推出的 react 19（目前处于候选发布阶段）之间的主要区别，提供新功能示例，并为使用 react 和 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) =&gt; {  const { pipe } = rendertopipeablestream(<app></app>, {    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="{&lt;loading"></suspense>}&gt;      <maincontent></maincontent><suspense fallback="{&lt;sidebarloading"></suspense>}&gt;        <sidebar></sidebar>  );}

在此示例中，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 <div>{user.name}</div>;}export default userprofile;

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

增强的并发渲染

增强悬念

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

react 18 示例：

function profilepage({ userid }) {  return (    <suspense fallback="{&lt;h1">loading profile...}&gt;      <profiledetails userid="{userid}"></profiledetails><suspense fallback="{&lt;h2">loading posts...}&gt;        <profiletimeline userid="{userid}"></profiletimeline></suspense></suspense>  );}

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

function profilepage({ userid }) {  return (    <suspense fallback="{&lt;h1">loading profile...}      primarycontent={<profiledetails userid="{userid}"></profiledetails>}    &gt;      <profiletimeline userid="{userid}"></profiletimeline></suspense>  );}

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

扩展自动渲染批处理

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

react 18 示例：

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

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

微调的基于优先级的渲染

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

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

import { usedeferredvalue, starttransition } from 'react';function searchresults({ query }) {  const deferredquery = usedeferredvalue(query);  return (          <div>searching for: {query}</div>      <suspense fallback="{&lt;spinner"></suspense>}&gt;        <results query="{deferredquery}"></results>&gt;  );}function handlesearch(input) {  starttransition(() =&gt; {    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 <button onclick="{handlesend}">send</button>;}

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

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

改进的上下文 api

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

react 18 示例：

const themecontext = react.createcontext('light');function app() {  const [theme, settheme] = usestate('light');  return (    <themecontext.provider value="{theme}"><header></header><main></main><footer></footer></themecontext.provider>  );}

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

const themecontext = react.createcontext('light', (prev, next) =&gt; prev === next);function app() {  const [theme, settheme] = usestate('light');  return (    <themecontext.provider value="{theme}"><header></header><main></main><footer></footer></themecontext.provider>  );}

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

性能优化

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

改进的比较算法

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)：主要区别和迁移技巧与示例

目录

介绍

react 19 的现状

与示例的主要区别

改进的服务器端渲染

增强的并发渲染

新的 hook 和 api

性能优化

迁移技巧

将 react 19 rc 与 vite 结合使用

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？