当前位置：首页 > 文章列表 > 文章 > 前端 > React 与 React (RC)：主要区别和迁移技巧与示例

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

来源：dev.to 2024-09-04 22:27:51 0浏览收藏

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

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.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);
    },
  });
});

精致选择性补水

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 组件。

服务器组件

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={<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 属性可能允许开发人员指定在加载过程中应优先考虑哪些内容。

扩展自动渲染批处理

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 可能会将这种批处理扩展到更多场景，可能包括异步操作。

微调的基于优先级的渲染

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

使用事件挂钩

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

改进的上下文 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>
  );
}

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

性能优化

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

改进的比较算法

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