React18新特性?

文章目录

  • 前言
  • Automatic Batching
  • Transitions
  • Suspense
  • New Hooks
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:react.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

Automatic Batching

早在 React 18 之前,React 就已经可以对 state 更新进行批处理了:

function App() {const [count, setCount] = useState(0);const [flag, setFlag] = useState(false);function handleClick() {setCount((c) => c + 1); // Does not re-render yetsetFlag((f) => !f); // Does not re-render yet// React will only re-render once at the end (that's batching!)}return (<div><div>{count}</div><button onClick={handleClick}>Next</button></div>);
}

上面这个例子中,用户点击按钮时会产生两次 state 的更新,按理来说每次 state 更新都会导致一次 re-render。但是,这两次更新完全可以合成一次,从而减少无谓的 re-render 带来的性能损失。

这种批处理只限于 React 原生事件内部的更新。

在 React 18 中,批处理支持处理的操作范围扩大了:Promise,setTimeout,native event handlers 等这些非 React 原生的事件内部的更新也会得到合并:

// Before: only React events were batched.setTimeout(() => {setCount((c) => c + 1);setFlag((f) => !f);// React will render twice, once for each state update (no batching)
}, 1000);// After: updates inside of timeouts, promises,// native event handlers or any other event are batched.setTimeout(() => {setCount((c) => c + 1);setFlag((f) => !f);// React will only re-render once at the end (that's batching!)
}, 1000);

Transitions

Transitions 是 React 中一个用于区分高优更新和非高优更新的新概念。

  • 高优的更新/渲染:包括鼠标点击、打字等对实时交互性要求很高的更新场景,卡顿时会影响用户的交互行为,使用户明显感到整个页面卡顿。

  • 非高优的更新/渲染:普通的 UI 更新,不与用户的交互相关,一些对更新实时性要求没那么高的场景。

这里有一个 demo,上方是一个滑动条用于控制下方树的倾角,最顶上的扇区展示了当前的掉帧情况,当用户拉动滚动条时,下方的树的每一个节点都会重新渲染,这会带来明显的卡顿,不仅是下方树的渲染卡顿,上方的滚动条也会无法实时跟着用户的交互移动,这会给用户带来明显的卡顿感。

类似场景下常见的做法应该是 debounce 或 throttle ,React 18 为我们提供了原生的方式来解决这个问题:使用 starTransition 和 useTransition。

  • starTransition:用于标记非紧急的更新,用 starTransition 包裹起来就是告诉 React,这部分代码渲染的优先级不高,可以优先处理其它更重要的渲染。用法如下:
import { startTransition } from "react";// Urgent
setSliderValue(input);// Mark any state updates inside as transitions
startTransition(() => {// Transition: Show the results, non-urgentsetGraphValue(input);
});

useTransition:除了能提供 startTransition 以外,还能提供一个变量来跟踪当前渲染的执行状态:

import { useTransition } from "react";const [isPending, startTransition] = useTransition();return isPending && <Spinner />;

在勾选了 Use startTransition 后 ,滑动条的更新渲染不会再被树的渲染阻塞了,尽管树叶的渲染仍然需要较多的时间,但是用户使用起来不再有之前那么卡顿了。

Suspense

Suspense 是 React 提供的用于声明 UI 加载状态的 API:

<Suspense fallback={<Loading />}><ComponentThatSuspends /><Sibling />
</Suspense>


上面这串代码里,组件 ComponentThatSuspends 在请求处理数据过程中,React 会在它的位置上展示 Loading 组件。

React 16 和 17 中也已经有 Suspense 了,但是它不是完全体,有许多功能仍未就绪。在 React 团队的计划中,Suspense 的完全体是基于 Concurrent React 的,所以在 React 18,Suspense 相较之前有了一些变化。

ComponentThatSuspends 的兄弟组件会被中断
还是上面那个例子:

<Suspense fallback={<Loading />}><ComponentThatSuspends /><Sibling />
</Suspense>

  • Legacy Suspense 中,同级兄弟组件会立即挂载(mounted)到 DOM,相关的 effects 和生命周期会被触发,最后会隐藏这个组件。具体可以查看 代码示例。

  • Concurrent Suspense 中,同级兄弟组件并不会从 DOM 上卸载,相关的 effects 和生命周期会在 ComponentThatSuspends 处理完成时触发

Suspense 边界之外的 ref
另一个差异是父级 ref 传入的时间:

<Suspense fallback={<Loading />}><ComponentThatSuspends /><Sibling />
</Suspense>
- 在 Legacy Suspense 中,在渲染之初 refPassedFromParent.current 立即指向 DOM 节点,此时 ComponentThatSuspends 还未处理完成。
  • 在 Concurrent Suspense 中,在 ComponentThatSuspends 完成处理、Suspense 边界解除锁定之前 refPassedFromParent.current 一直为 null。

也就是说,在父级代码中访问此类 ref 都需要关注当前 ref 是否已经指向相应的节点。
Suspense for SSR

React 18 之前的 SSR, 客户端必须一次性的等待 HTML 数据加载到服务器上并且等待所有 JavaScript 加载完毕之后再开始 hydration, 等待所有组件 hydration 后,才能进行交互。即整个过程需要完成从获取数据(服务器)→ 渲染到 HTML(服务器)→ 加载代码(客户端)→ 水合物(客户端)这一套流程。这样的 SSR 并不能使我们的完全可交互变快,只是提高了用户的感知静态页面内容的速度。

React 18 的 Suspense:

服务器不需要等待被 Suspense 包裹组件是否加载到完毕,即可发送 HTML,而代替 Suspense 包裹的组件是 fallback 中的内容,一般是一个占位符(spinner),以最小内联

  • hydration 的过程是逐步的,不需要等待所有的 js 加载完毕再开始 hydration,避免了页面的卡顿。

  • React 会提前监听页面上交互事件(如鼠标的点击),对发生交互的区域优先进行 hydration。

New Hooks

  • useTransition:见上

  • useDeferredValue

    • startTransition 可以用来标记低优先的 state 更新;而useDeferredValue 可以用来标记低优先的变量。

    • 下方代码的具体效果是当 input 的值改变时,返回的 graphValue 并不会立即改变,会首先返回上一次的 input 值,如果当前不存在更紧急的更新,才会变成最新的 input,因此可以通过 graphValue 是否改变来进行一些低优先级的更新。可以在渲染比较耗时的情况下把优先级滞后,在多数情况不会存在不必要的延迟。在较快的机器上,滞后会更少或者根本不存在,在较慢的机器上,会变得更明显。但不论哪种情况,应用都会保持可响应。

import { useDeferredValue } from "react";const Comp = (input) => {const graphValue = useDeferredValue(input); // ...updating depends on graphValue
};

不常用的 hooks

以下的新 hook 主要用于解决 SSR 相关的问题或者是为第三方库的开发设计的,对于普通 React 应用开发者来说几乎用不到:

  • useId 用于解决 SSR 时客户端与服务端难以生成统一的 ID 的问题。

  • useSyncExternalStore 是一个为第三方库编写提供的新 hook,主要用于支持 React 18 在 concurrent rendering 下与第三方 store 的数据同步问题。

  • useInsertionEffect 主要用于提高第三方 CSS in JS 库渲染过程中样式注入的性能。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/127636.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于深度学习的人脸专注度检测计算系统 - opencv python cnn 计算机竞赛

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…

怎样去除视频中的杂音,保留人声部分?

怎样去除视频中的杂音&#xff0c;保留人声部分&#xff1f;这个简单嘛&#xff01;两种办法可以搞定&#xff1a;一是进行音频降噪&#xff0c;把无用的杂音消除掉&#xff1b;二是提取人声&#xff0c;将要保留的人声片段提取出来。 这就将两种实用的办公都分享出来&#xf…

HashMap源码分析——Java全栈知识(8)

jdk1.7和jdk1.8的HashMap的原理有一点出入我们就分开讲解&#xff1a; 1、JDK1.7中的HashMap JDK1.7中的HashMap是通过数组加链表的方式存储数据。他的底层维护了一个Entry数组&#xff0c;通过哈希函数的计算出来哈希值&#xff0c;将待填数据根据计算出来的哈希值填入到对应…

何恺明:在cuhk解答科研问题

文章目录 1. 大模型的未来:数据效益是个问题2. 未来三年研究重点:视觉自监督学习3. 选择课题的标准:好奇心和热情4. AI将成为几乎所有事情的基础工具5. 用疑问解答AI模型可解释性问题AcknowledgementReference何恺明最近在香港中文大学参加一个讲座过程中所述: 1. 大模型的…

循环神经网络(RNN)与长短期记忆网络(LSTM)

前言&#xff1a; 通过前面的学习&#xff0c;我们以BP神经网络为基础&#xff0c;认识到了损失函数&#xff0c;激活函数&#xff0c;以及梯度下降法的原理&#xff1b;而后学习了卷积神经网络&#xff0c;知道图像识别是如何实现的。今天这篇文章&#xff0c;讲述的就是计算机…

【数据结构】树形结构所有路径复原为链表

目录 1. 树形结构可视化 2. 树形结构转为链表 此目标是要还原树形结构的所有路径。树形结构是一种常见的数据结构&#xff0c;它表示元素之间层次关系。在树形结构中&#xff0c;每个节点可能拥有一个或多个子节点&#xff0c;形成了一个分层的结构。为了还原树形结构的路径&…

Android 多语言 切换

你还在重写attachBaseContext自定义多语言切换吗&#xff1f; 你还需要自己用轻量级存储&#xff08;SharedPreferences、datastore&#xff09;之类的来保存你切换的语言吗&#xff1f; 你还需要自己编写重启活动逻辑吗? 比如&#xff1a; override fun attachBaseContext(n…

自定义微信公众号源码系统 带完整搭建教程

在我们现在的互联网时代&#xff0c;越来越多的人开始尝试通过微信公众号来传播自己的信息、提供服务或者进行营销。但是&#xff0c;市面上的微信公众号平台往往功能有限&#xff0c;不能满足部分用户的需求。这时&#xff0c;自定义微信公众号源码系统就成为了解决问题的最佳…

AUC的解释,以及其他指标

因为做比赛&#xff0c;又开始看一些关于评价指标的问题&#xff0c;下面这篇帖子不错&#xff0c;贴过来吧。 参考 ROC曲线画法。 https://www.zhihu.com/question/22844912

TypeScript - 类 - 静态成员

介绍一下静态成员 静态成员 &#xff1a; 静态的属性、静态的方法静态成员是直接属于类的&#xff0c;不属于对象&#xff0c;因此&#xff0c;类的对象是不能使用静态成员的静态成员只能通过 类直接使用关键字 &#xff1a; static静态代码块 &#xff1a; 主要作用还是用来进…

Http代理与socks5代理有何区别?如何选择?(二)

上篇文章我们基本分别了解了http代理与socks5代理的定义与优缺点&#xff0c;接下来我们继续来了解http代理与socks5代理之间的比较与区别。 一、两者的比较 1、功能比较 HTTP代理专门用于Web流量&#xff0c;并在处理HTTP和HTTPS协议方面非常高效。它们可以修改正在传输的数…

怎么扫码下载视频?一招生成可下载的视频二维码

怎么做可以下载视频的二维码呢&#xff1f;当我们用二维码来分享时&#xff0c;很多视频二维码生成器制作的二维码都只有展示功能&#xff0c;无法让扫码者选择下载视频&#xff0c;那么这个问题有什么解决方法呢&#xff1f;对于有这方面需求的小伙伴&#xff0c;小编可以给大…

Tomcat下载地址(详细)

Apache Tomcat - Apache Tomcat 8 Software Downloadshttps://tomcat.apache.org/download-80.cgi2.找到Archives 3.选择下载的把版本 4.选择具体下载那个版本 5. 6.一般选择tar.gz结尾的压缩包

安全狗亮相厦门市工信领域数据安全宣贯培训会

10月31日&#xff0c;厦门市工业和信息化局&#xff08;市大数据管理局&#xff09;顺利举办厦门市工信领域数据安全宣贯培训。 作为国内云原生安全领导厂商&#xff0c;安全狗以厦门市工业领域数据安全管理支撑单位身份受邀出席此次会议。 据悉&#xff0c;此次活动旨在贯彻…

Java 设计模式——命令模式

目录 1.概述2.结构3.案例实现3.1.命令接口3.2.具体命令3.3.接受者3.4.调用者3.5.测试 4.优缺点5.使用场景6.JDK 源码解析——Runnable 1.概述 &#xff08;1&#xff09;日常生活中&#xff0c;我们出去吃饭都会遇到下面的场景&#xff1a; &#xff08;2&#xff09;命令模…

Flask三种添加路由的方法

Flask 是一个流行的 Python Web 框架&#xff0c;它提供了多种方法来添加路由。路由是将 URL 映射到特定函数的过程&#xff0c;它是构建 Web 应用程序的基础。本文将介绍 Flask 中几种常用的路由添加方法&#xff0c;并附带代码示例。 方法一&#xff1a;使用装饰器 from flas…

Unity AssetBundle批量打包、加载(场景、Prefab)完整流程

目录 1、文章介绍 2、具体思路和写法 &#xff08;1&#xff09;AB包的打包 &#xff08;2&#xff09;AB包的加载 &#xff08;3&#xff09;AB包卸载 3、结语 1、文章介绍 本篇博客主要起记录和学习作用&#xff0c;简单的介绍一下AB包批量的打包和加载AB包的方式&…

NOIP2023模拟9联测30 高爸

题目大意 Shintaro \text{Shintaro} Shintaro有 n n n条龙&#xff0c;第 i i i条龙的力量值为 x i x_i xi​。现在 Shintaro \text{Shintaro} Shintaro想与这些龙交朋友。 Shintaro \text{Shintaro} Shintaro会使用以下两种魔法来平衡龙的力量值&#xff08;使某些龙的力量值相…

【HeidiSql_01】python在heidisql当中创建新表的注意事项

python在heidisql当中创建新表的注意事项 假设你已经在python当中弄好了所有的结果&#xff0c;并且保存在df_all这个dataframe当中&#xff0c;然后要将其导入数据库当中并创建一张新的表进行保存。 # 构建数据库连接,将merged_df写回数据库 from sqlalchemy import create_e…

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…