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

本篇文章给大家分享《React 与 React (RC)：主要区别和迁移技巧与示例》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

目录

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

介绍

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

react 19 的现状

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

与示例的主要区别

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

改进的服务器端渲染

1. 增强型流式 ssr

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

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

// server.js
import { rendertopipeablestream } from 'react-dom/server';

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

1. 精致选择性补水

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

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

import { suspense } from 'react';

function app() {
  return (
    <suspense fallback={<loading />}>
      <maincontent />
      <suspense fallback={<sidebarloading />}>
        <sidebar />
      </suspense>
    </suspense>
  );
}

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

1. 服务器组件

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 组件在服务器上运行，允许直接访问数据库，而无需向客户端暴露敏感信息。

增强的并发渲染

1. 增强悬念

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

react 18 示例：

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

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

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

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

1. 扩展自动渲染批处理

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 <button onclick={handleclick}>{count}</button>;
}

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

1. 微调的基于优先级的渲染

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

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

import { usedeferredvalue, starttransition } from 'react';

function searchresults({ query }) {
  const deferredquery = usedeferredvalue(query);

  return (
    <>
      <div>searching for: {query}</div>
      <suspense fallback={<spinner />}>
        <results query={deferredquery} />
      </suspense>
    </>
  );
}

function handlesearch(input) {
  starttransition(() => {
    setsearchquery(input);
  });
}

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

新的 hook 和 api

1. 使用事件挂钩

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(() => {
    // this will always use the current `roomid`
    sendmessage(roomid, message);
  });

  return <button onclick={handlesend}>send</button>;
}

1. 改进的上下文 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 />
      <main />
      <footer />
    </themecontext.provider>
  );
}

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

const themecontext = react.createcontext('light', (prev, next) => prev === next);

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

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

性能优化

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

1. 改进的比较算法

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

1. 内存使用改进

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

1. 更好的摇树

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';
          }
        }
      }
    }
  }
})

迁移技巧

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

将 react 19 rc 与 vite 结合使用

使用 vite 试验 react 19 release candidate：

1. 创建一个新的vite项目：

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

1. 导航到项目目录：

   cd my-react-19-rc-app

1. 安装 react 19 rc 版本：

   npm install react@rc react-dom@rc

1. 更新你的 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']
     }
   })

1. 启动开发服务器：

   npm run dev

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

结论

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

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

以上就是《React 与 React (RC)：主要区别和迁移技巧与示例》的详细内容，更多关于的资料请关注golang学习网公众号！