React Conf 2024

大家好,我是 CUGGZ。

React 大会于 2024 于 5 月 15 - 16 日举行,本文就来回顾一下活动第一天的部分关键信息!

React 19 新功能

React 19 Beta 版本已于近日发布,即将发布 RC 版,距离正式版又进了一步。

React 19 中的新功能主要包括:

  • Actions 功能 :通过 useTransitionuseOptimistic 等 Hook 改进了处理异步操作和状态更新的方式,简化了挂起状态、错误处理、乐观更新的管理。
  • 服务器组件
    • 服务器组件:React 19 正式集成了服务器组件特性,允许在构建前预先渲染组件,提供了两种运行模式:构建时运行和实时请求处理。
    • 服务器操作:允许客户端组件调用并执行服务端的异步函数,通过"use server"指令定义服务器操作,框架会创建指向服务端函数的引用。
  • 功能优化:
    • ref 作为属性ref 可以作为函数组件的参数直接访问,不再需要 forwardRef
    • 水合错误报告优化:改进了客户端渲染与服务端渲染内容不匹配时的错误报告,提供了更清晰的错误信息。
    • 作为提供者的 :可以直接使用 <Context> 作为提供者,而无需传统的 <Context.Provider>
    • refs 清理函数:支持从 ref 回调函数返回一个清理函数,以便在组件卸载时进行清理工作。
    • useDeferredValue 的初始值:允许指定组件首次渲染时的值。
    • 文档元数据支持 :允许在组件中直接定义 <title><link><meta> 等文档元数据标签,React 会自动将它们提升到文档的 <head> 部分。
    • 样式表支持:提供了内置支持,允许在组件树中直接管理样式表,并自动处理样式表的加载顺序。
    • 异步脚本支持:允许在组件树的任何位置渲染异步脚本,简化了脚本的管理。
    • 资源预加载支持 :引入了预加载 API,如 prefetchDNSpreconnectpreloadpreinit,以优化资源加载。
    • 与第三方脚本和扩展的兼容性:改进了对第三方脚本和浏览器扩展的兼容性。
    • 更好的错误报告:优化了错误处理,提供了更多的错误处理选项。
    • 自定义元素支持(Web Components):增强了对自定义元素的支持,通过了所有 Custom Elements Everywhere 测试。

React 编译器开源

React 编译器开源正式开源,并将在 React 19 中可用。值得一提的是,React 编译器源代码有近 36 万行代 ,提交了 1900 次主要使用 Rust 语言编写。 目前可以在 React 19 beta 或者在线 Playground 中(playground.react.dev/)尝试!

源代码:github.com/facebook/re...

React 编译器(React Compiler)是一个实验性工具,旨在通过自动优化来提高 React 应用的性能。它通过理解 JavaScript 语义和 React 的规则,自动对代码进行诸如记忆等优化,从而减少不必要的计算和渲染,提升应用的响应速度和用户体验。有了 React 编译器,useMemouseCallbackReact.memo 等 API 都不需要了。

注意

  • 实验性质:React 编译器目前仍处于实验阶段,尚未完全准备好用于生产环境。
  • React 19 Beta 兼容:要使用 React 编译器,需要确保项目依赖的是 React 19 Beta 或更高版本。
  • 代码库健康与 React 规则:编译器的效果取决于代码库的健康状况以及遵循 React 规则的程度。如果代码已经很好地进行了手动优化,那么使用编译器可能不会带来显著的性能提升。
  • 不急于使用:尽管 React 团队鼓励在非关键项目中进行小规模实验以提供反馈,但在将编译器推广到你的生产环境之前,请务必谨慎考虑。等待编译器达到稳定版本后再采用可能是一个更好的选择。
  • 集成与配置:React 编译器与多种构建工具和框架兼容,但可能需要一些额外的配置才能正确集成。请仔细阅读官方文档,并按照指南进行配置。
  • 故障排除:如果遇到问题,可以先在 React 编译器 Playground 上创建一个最小可复现示例,并在错误报告中提供它。这有助于更快地定位和解决问题。
  • 性能测试:可以在引入编译器之前和之后进行性能测试,这有助于了解编译器对应用的实际影响。

官方文档:react.dev/learn/react...

React Router 与 Remix 合并

在 React Conf 上,Remix 宣布与 React Router 合并。在即将发布的 React Router v7 中,将包含 Remix 的所有特性,届时,对于 Remix 用户,只需更改 import 语句即可;而对于 React Router 用户,可以直接在 React 项目中使用 Remix 的特性!

那为什么 Remix 要合并到 React Router 中呢?

  • Remix 作为构建在 React Router 之上的框架,两者之间的界限变得越来越模糊。
  • 随着 Create React App 不再被推荐,社区需要一个新的、更好的方式来构建 React 应用,Remix 希望能填补这一空缺。
  • React Router 用户量更庞大,合并使得现有的 React Router 项目能够更容易地采用 Remix 的特性(换一种方式推广 Remix)。

Remix 是什么? Remix 是 React Router 团队开源的一个全栈 Web 框架。早期需要付费使用,于 2021 年正式开源,开源时还引起了不小的讨论,很多人都认为它将成为 Next.js 的有力竞争对手。不过,开源两年半的时间,Remix 和 Next.js 的下载量可谓是天差地别,:

两个 React

主要讨论了在使用 React 构建用户界面(UI)时,组件应该在客户端还是服务端运行的问题。

  • 客户端 运行组件的优势:
    • 即时反馈:用户与UI交云时,如点击按钮,可以获得即时的反馈,无需等待服务器响应。
    • 无需服务器轮询:对于一些用户操作,如拖动滑块或点击按钮,不需要服务器的额外请求或数据下载。
    • 更好的用户体验:直接的交互响应提升了用户体验,使得应用感觉更灵敏和流畅。
    • 利用客户端状态:组件可以使用客户端状态(UI = f(state)),这允许构建高度交互式和响应式的用户界面。
  • 服务端 运行组件的优势:
    • 数据访问:服务端组件可以访问服务器上的数据和文件,这对于数据密集型的应用非常有用。
    • 预处理数据:在数据发送到客户端之前,服务端组件可以对数据进行读取和预处理。
    • 构建时渲染:服务端组件可以在应用构建时运行,生成静态的UI,这对于SEO和首屏加载性能有好处。
    • 简化客户端:通过在服务端处理复杂的数据处理逻辑,可以减少客户端的负担,使得客户端只接收并显示必要的UI数据。

可以参见 Dan Abramov 的博客文章:overreacted.io/the-two-rea...

相关推荐
小满zs2 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon3 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn5 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友6 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程7 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅7 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军7 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy7 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz8 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar8 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript