react Hooks之useLayoutEffect和useInsertionEffect

在介绍这两个hooks之前。让我们先对比一下useEffect、useLayoutEffect、useInsertionEffect

  1. 执行时机

    • useEffect 在组件渲染完成后执行,属于异步执行。
    • useInsertionEffect 在组件渲染并插入 DOM 后执行,也属于异步执行。
    • useLayoutEffect 在组件渲染完成后立即同步执行,并在浏览器布局和绘制之前运行。
  2. 对 DOM 元素的访问

    • 使用 useEffect 时,无法直接访问具体的 DOM 元素。
    • 使用 useInsertionEffect 时,可以通过传递 ref 引用来获取对特定 DOM 元素的引用,并在回调函数中进行操作。
    • 使用 useLayoutEffect 时,也可以通过 ref 获取对 DOM 元素的引用,并在组件渲染完成后立即同步执行副作用操作。
  3. 影响浏览器渲染的时机

    • useEffect 和 useInsertionEffect 的执行时机都是在浏览器渲染之后,不会阻塞页面的渲染过程。
    • useLayoutEffect 的执行是同步的,并且在浏览器布局和绘制之前运行,因此如果其中的副作用操作比较耗时,可能会阻塞浏览器的渲染过程,导致用户界面的卡顿

一、useLayoutEffect

1、作用:

它在组件完成渲染后同步执行副作用操作,并在浏览器布局和绘制之前运行。它与 useEffect 的使用方式类似,但在执行时机上有所不同。

具体来说,useLayoutEffect 的执行时机如下:

  1. 在组件渲染完成后立即执行。
  2. 在浏览器执行布局和绘制之前运行,以确保在浏览器更新屏幕之前执行副作用操作。

这意味着 useLayoutEffect 会在 DOM 更新之后、浏览器绘制之前同步执行,使得其副作用操作能够立即对 DOM 进行更改,而这些更改可能会影响到浏览器的布局和绘制。

2、注意事项

由于 useLayoutEffect 的执行是同步的,如果其中的副作用操作比较耗时,会阻塞浏览器的渲染过程,导致用户界面的卡顿。因此,在使用 useLayoutEffect 时,应该谨慎处理副作用操作的性能问题。

3、用法:同useEffect类似,一个回调函数,一个依赖项。

4、示例

import { useLayoutEffect, useRef } from 'react';function Example() {const ref = useRef(null);const [count, setCount] = useState(0);useLayoutEffect(() => {console.log('useLayoutEffect - Component rendered:', ref.current);ref.current.style.backgroundColor = 'red';return () => {console.log('useLayoutEffect cleanup');};}, [count]);return (<div><div ref={ref}>Hello World</div><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这个例子中,我们创建了一个 ref 引用,用于访问 DOM 元素。在 useLayoutEffect 的回调函数中,我们可以通过 ref.current 获取到对应的 <div> 元素,并设置其背景颜色为红色。此外,我们还在 deps 参数中传递了 count 状态,表示只有当 count 发生变化时才执行副作用操作。

二、useInsertionEffect

1、作用

它用于在组件渲染并插入 DOM 后执行副作用操作。与 useEffectuseLayoutEffect 不同,useInsertionEffect 的回调函数会在浏览器完成对 DOM 元素的插入操作后才运行。

2、用法

和useEffect类似,不具体说明

3、注意事项:

由于 useInsertionEffect 的回调函数是在浏览器完成对 DOM 元素的插入操作后才运行,因此可以在其中直接访问具体的 DOM 元素。这与 useEffectuseLayoutEffect 不同,它们无法直接访问具体的 DOM 元素。因此,在处理需要访问具体 DOM 元素的副作用操作时,可以优先考虑使用 useInsertionEffect

4、示例:

import { useInsertionEffect, useRef } from 'react';function Example() {const ref = useRef(null);const [count, setCount] = useState(0);useInsertionEffect(() => {console.log('useInsertionEffect - Component inserted:', ref.current);ref.current.style.backgroundColor = 'red';return () => {console.log('useInsertionEffect cleanup');};}, [count]);return (<div><button onClick={() => setCount(count + 1)}>Click me</button><div ref={ref}>Hello World</div></div>);
}

在这个例子中,我们创建了一个 ref 引用,用于访问 DOM 元素。在 useInsertionEffect 的回调函数中,我们可以通过 ref.current 获取到对应的 <div> 元素,并设置其背景颜色为红色。此外,我们还在 deps 参数中传递了 count 状态,表示只有当 count 发生变化时才执行副作用操作。

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

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

相关文章

互联网公司,哪个部门才是鄙视链最顶端?

文章目录 每日一句正能量前言财务部法务部公关部销售部前台行政IT部创意部后记 每日一句正能量 我们必须在失败中寻找胜利&#xff0c;在绝望中寻求希望。 前言 在互联网公司中&#xff0c;不同职位的鄙视链是存在的。有些职位享有高尚的地位&#xff0c;而有些则被看作是次要…

python 爬虫 m3u8 视频文件 加密解密 整合mp4

文章目录 一、完整代码二、视频分析1. 认识m3u8文件2. 获取密钥&#xff0c;构建解密器3. 下载ts文件4. 合并ts文件为mp4 三、总结 一、完整代码 完整代码如下&#xff1a; import requests import re import os from tqdm import tqdm from Crypto.Cipher import AES# 创建临…

Shopify二次开发之五:元字段(Metafields)

目录 解释 操作 1、添加Custom data 2、选择特定类型的数据 3、为Page配置元子段和值 4、模板访问 解释 Shopify Metafields 是一种用于存储和管理自定义数据的功能。它们允许商户在商城中的产品、订单、客户、Page等对象上添加自定义字段&#xff0c;以满足特定业务需求…

c语言->自定义类型联合体和枚举类型

系列文章目录 文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,函数,指针-CSDN博客 目的&#xff1a;学习联合体和枚举类型的…

[cleanrl] ppo_continuous_action源码解析

1 import库&#xff08;略&#xff09; import os import random import time from dataclasses import dataclassimport gymnasium as gym import numpy as np import torch import torch.nn as nn import torch.optim as optim import tyro from torch.distributions.normal…

Kubernetes实战(八)-防止k8s namespace被误删除

1 背景 运维新同学在预发环境操作删除pod的时候&#xff0c;不知道什么原因把kubectl delete pod命令敲成了kubectl delete ns pre把预发环境删了&#xff0c;几十个模块&#xff0c;将近一个小时才恢复。幸亏是测试环境啊&#xff0c;如果是生产可以可以跑路了。 2 解决方案…

jsonpath:使用Python处理JSON数据

使用Python处理JSON数据 25.1 JSON简介 25.1.1 什么是JSON JSON全称为JavaScript Object Notation&#xff0c;一般翻译为JS标记&#xff0c;是一种轻量级的数据交换格式。是基于ECMAScript的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清…

java对二维数组进行排序

一、按行排序&#xff1a; 对二维数组按进行排序&#xff0c;直接调用Arrays.sort就行&#xff1a; private static int [][] sortRows(int[][] arr) {//行排序for (int i 0; i < arr.length; i) {Arrays.sort(arr[i]);}return arr;}二、按列排序&#xff1a; 1.使用比较…

计算机网络:应用层(一)

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

鸿蒙开发之状态管理@Observed和@ObjectLink

一、使用场景 当对象内引用对象&#xff0c;改变内部对象属性的时候其他状态管理如State、Provide、Consume等是无法触发更新的。同样&#xff0c;在数组内如果有对象&#xff0c;改变对象的属性也是无法更新的。在这种情况下就可以采用Observed和ObjectLink装饰器了。 二、使…

C# WPF上位机开发(简易图像处理软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 图像处理是工业生产重要的环节。不管是定位、测量、检测还是识别&#xff0c;图像处理在工业生产中扮演重要的角色。而c#由于自身快速开发的特点&a…

玩转 Go 语言并发编程:Goroutine 实战指南

一、goroutine 池 本质上是生产者消费者模型在工作中我们通常会使用可以指定启动的 goroutine 数量-worker pool 模式&#xff0c;控制 goroutine 的数量&#xff0c;防止 goroutine 泄漏和暴涨一个简易的 work pool 示例代码如下&#xff1a; package mainimport ("fmt…

小程序跳转tabbar,tabbar页面不刷新

文章地址&#xff1a;12.小程序 之切换到tabBar页面不刷新问题_360问答 解决办法备份&#xff1a; wx.switchTab&#xff1a;跳转到 tabBar 页面&#xff0c;并关闭其他所有非 tabBar 页面 wx.reLaunch&#xff1a;关闭所有页面&#xff0c;打开到应用内的某个页面。 wx.reLa…

解决微信小程序中 ‘nbsp;‘ 空格不生效的问题

在微信小程序开发中&#xff0c;我们经常会使用 来表示一个空格。这是因为在 HTML 中&#xff0c;空格会被解析为一个普通字符&#xff0c;而不会产生实际的空白间距。而 是一种特殊的字符实体&#xff0c;它被解析为一个不可见的空格&#xff0c;可以在页面上产生真正的空…

力扣70. 爬楼梯

动态规划 思路&#xff1a; 使用递归比较容易理解&#xff0c; f(n) f(n - 1) f(n - 2)&#xff1b; 到剩余1级台阶有 f(n - 1)&#xff0c;到剩余2级台阶有 f(n-2)&#xff1b;边界情况是 n 0, f(0) 1n 1, f(1) 1n 2, f(2) 2 递归代码实现&#xff1a; class Soluti…

Axure RP 9 入门教程

1. Axure简介 Axure 是一个交互式原型设计工具&#xff0c;可以帮助用户创建复杂的交互式应用程序和网站。Axure 能够让用户快速构建出具有高度可交互性的原型&#xff0c;可以在团队中进行协作、分享和测试。 使用 Axure 可以设计出各种不同类型的原型&#xff0c;包括网站、移…

系列十五、搭建redis集群

一、概述 上篇文章介绍了redis集群的相关知识&#xff0c;本章实战演示redis的集群环境的详细搭建步骤。如果帮助到了你&#xff0c;请点赞 收藏 关注&#xff01;有疑问的话也可以评论区交流。 二、搭建步骤 2.1、预备知识 判断一个集群中的节点是否可用&#xff0c;是集群…

【SpringBoot篇】详解基于Redis实现短信登录的操作

文章目录 &#x1f970;前言&#x1f6f8;StringRedisTemplate&#x1f339;使用StringRedisTemplate⭐常用的方法 &#x1f6f8;为什么我们要使用Redis代替Session进行登录操作&#x1f386;具体使用✨编写拦截器✨配置拦截器&#x1f33a;基于Redis实现发送手机验证码操作&am…

EarCMS 前台任意文件上传漏洞复现

0x01 产品简介 EarCMS是一个APP内测分发系统的平台。 0x02 漏洞概述 EarCMS前台put_upload.php中,存在pw参数硬编码问题,同时sql语句pdo使用错误,没有有效过滤sql语句,可以控制文件名和后缀,导致可以任意文件上传。 0x03 复现环境 FOFA:app="EearCMS" 0x0…

Flutter实现自定义二级列表

在Flutter开发中&#xff0c;其实系统已经给我们提供了一个可靠的二级列表展开的API&#xff08;ExpansionPanelList&#xff09;&#xff0c;我们先看系统的二级列表展开效果&#xff0c;一次只能展开一个&#xff0c;用ExpansionPanelList.radio实现 由此可见&#xff0c;已经…