当前位置：首页 > 科技 > 软件

怪不得这么多人学 React！

来源：责编：时间：2024-05-17 09:03:14 79观看

导读大家好，我是 CUGGZ。React 大会于 2024 于 5 月 15 - 16 日举行，本文就来回顾一下活动第一天的部分关键信息！React 团队的男女颜值担当都来了，怪不得这么多人学 React 呢！（开个玩笑，下面来看正文）React 19 新功能React 19 Bet

大家好，我是 CUGGZ。

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

React 团队的男女颜值担当都来了，怪不得这么多人学 React 呢！（开个玩笑，下面来看正文）

React 19 新功能

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

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

Actions 功能：通过 useTransition 和 useOptimistic 等 Hook 改进了处理异步操作和状态更新的方式，简化了挂起状态、错误处理、乐观更新的管理。
服务器组件：

服务器组件：React 19 正式集成了服务器组件特性，允许在构建前预先渲染组件，提供了两种运行模式：构建时运行和实时请求处理。
服务器操作：允许客户端组件调用并执行服务端的异步函数，通过“use server”指令定义服务器操作，框架会创建指向服务端函数的引用。

功能优化：
ref 作为属性：ref 可以作为函数组件的参数直接访问，不再需要 forwardRef。
水合错误报告优化：改进了客户端渲染与服务端渲染内容不匹配时的错误报告，提供了更清晰的错误信息。
作为提供者的 ：可以直接使用 <Context> 作为提供者，而无需传统的 <Context.Provider>。
refs 清理函数：支持从 ref 回调函数返回一个清理函数，以便在组件卸载时进行清理工作。
useDeferredValue 的初始值：允许指定组件首次渲染时的值。
文档元数据支持：允许在组件中直接定义 <title>、<link> 和 <meta> 等文档元数据标签，React 会自动将它们提升到文档的 <head> 部分。
样式表支持：提供了内置支持，允许在组件树中直接管理样式表，并自动处理样式表的加载顺序。
异步脚本支持：允许在组件树的任何位置渲染异步脚本，简化了脚本的管理。
资源预加载支持：引入了预加载 API，如 prefetchDNS、preconnect、preload 和 preinit，以优化资源加载。
与第三方脚本和扩展的兼容性：改进了对第三方脚本和浏览器扩展的兼容性。
更好的错误报告：优化了错误处理，提供了更多的错误处理选项。
自定义元素支持（Web Components）：增强了对自定义元素的支持。

React 编译器开源

React 编译器开源正式开源，并将在 React 19 中可用。值得一提的是，React 编译器源代码有近 36 万行代，提交了 1900 次，底层使用 Rust 语言编写。

目前可以在 React 19 beta 或者在线 Playground 中（https://playground.react.dev/）尝试！

源代码：https://github.com/facebook/react/tree/main/compiler。

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

有了 React 编译器，useMemo、useCallback、React.memo 等 API 都不需要了。

注意：

实验性：React 编译器目前仍处于实验阶段，尚未完全准备好用于生产环境。
React 19 Beta 兼容：要使用 React 编译器，需要确保项目依赖的是 React 19 Beta 或更高版本。
代码库健康与 React 规则：编译器的效果取决于代码库的健康状况以及遵循 React 规则的程度。如果代码已经很好地进行了手动优化，那么使用编译器可能不会带来显著的性能提升。
不急于使用：尽管 React 团队鼓励在非关键项目中进行小规模实验以提供反馈，但在将编译器推广到你的生产环境之前，请务必谨慎考虑。等待编译器达到稳定版本后再采用可能是一个更好的选择。
集成与配置：React 编译器与多种构建工具和框架兼容，但可能需要一些额外的配置才能正确集成。请仔细阅读官方文档，并按照指南进行配置。

官方文档：https://react.dev/learn/react-compiler。

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 的博客文章：https://overreacted.io/the-two-reacts/。

本文链接：http://www.28at.com/showinfo-26-88740-0.html怪不得这么多人学 React！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：一招教你解决页面中关联id的转换

下一篇：美团面试：如何实现线程任务编排？

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
7月安卓手机性价比榜：努比亚+红魔两款新机入榜

7月登场的新机有努比亚Z50S Pro和红魔8S Pro，除了三星之外目前唯二的两款搭载超频版骁龙8Gen2处理器的产品，而且努比亚和红魔也一贯有着不错的性价比，所以在本次的性价比榜单
6月安卓手机性价比榜：Note 12 Turbo断层式碾压

6月份有一个618，虽然这是京东周年庆的日子，但别的电商也都不约而同的跟进了，反正促销没坏处，厂商和用户都能满意。618期间一些产品也出现了历史低价，那么各个价位段的产品性价比
太卷！Redmi MAX 100英寸电视便宜了：12999元买Redmi史上最大屏

8月5日消息，从小米商城了解到，Redmi MAX 100英寸巨屏电视日前迎来官方优惠，到手价12999元，比发布价便宜了7000元，在大屏电视市场开卷。据了解，Redmi MAX 100
AI芯片初创公司Tenstorrent获三星和现代1亿美元投资

Tenstorrent是一家由芯片行业资深人士Jim Keller领导的加拿大初创公司，专注于开发人工智能芯片，该公司周三表示，已经从现代汽车集团和三星投资基金等
iQOO 11S或7月上市：搭载“鸡血版”骁龙8Gen2 史上最强5G Soc

去年底，iQOO推出了“电竞旗舰”iQOO 11系列，作为一款性能强机，iQOO 11不仅全球首发2K 144Hz E6全感屏，搭载了第二代骁龙8平台及144Hz电竞屏，同时在快充
iQOO Neo8系列新品发布会

旗舰双芯更强更Pro
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS
OPPO K11样张首曝：千元机影像“卷”得真不错！

一直以来，OPPO K系列机型都保持着较为均衡的产品体验，历来都是2K价位的明星机型，去年推出的OPPO K10和OPPO K10 Pro两款机型凭借各自的出色配置，堪称有