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

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 进行示例和比较。 改进的服务器端渲染增强型流式 ssrreact 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>;}登录后复制改进的上下文 apireact 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)：主要区别和迁移技巧与示例的详细内容，更多请关注我的其它相关文章！