首页 > 其他分享 >useffect 模拟生命周期 及与useLayoutEffect的区别

useffect 模拟生命周期 及与useLayoutEffect的区别

时间:2024-05-09 15:55:23浏览次数:13  
标签:生命周期 DOM 渲染 useffect 副作用 useEffect 模拟 useLayoutEffect

一 useffect
1 模拟componentDidMount
第二个参数为一个空数组,可以模拟componentDidMount

componentDidMount:useEffect(()=>{console.log('第一次渲染时调用')},[])
2 模拟componentDidUpdate
没有第二个参数代表监听所有的属性更新

useEffect(()=>{console.log('任意状态改变')})
监听多个属性的变化需要将属性作为数组传入第二个参数。

useEffect(()=>{console.log('指定状态改变')},[状态1,状态2...])
3 模拟componentWillUnmount
useEffect(()=>{ ... return()=>{ //组件卸载前} })

二 useLayoutEffect
useLayoutEffect 是 useEffect 的一个版本,在浏览器重新绘制屏幕之前触发;useLayoutEffect 可能会影响性能
useEffect在组件渲染后(DOM 更新之后)执行副作用函数,这意味着它是异步执行的,不会阻塞页面的渲染。useLayoutEffect在 DOM 更新之后、浏览器执行绘制之前同步执行副作用函数。因此,它的执行时机比useEffect更早,可能会阻塞页面的渲染。

useLayoutEffect 的使用场景:

  1. 当副作用函数中包含对 DOM 的操作,并且需要立即更新 DOM 以确保用户看到一致的界面时,可以考虑使用 useLayoutEffect。
    2 适用于需要立即更新 DOM 的副作用逻辑,比如测量 DOM 尺寸、操作 DOM 元素的样式、对焦等。
    3 当有些副作用依赖于浏览器布局和绘制时,或者需要在渲染前同步执行副作用逻辑时,可以选择 useLayoutEffect。

标签:生命周期,DOM,渲染,useffect,副作用,useEffect,模拟,useLayoutEffect
From: https://www.cnblogs.com/zw100655/p/18182486

相关文章

  • uniapp 编译成h5,返回上一页之后没有触发生命周期问题
    今天开发测试的时候,无意中发现点击分享链接进去登陆成功返回上一页的时候,页面直接空白了。刚开始的时候,就很奇怪,毕竟分享链接这个功能是好久之前的,不可能无缘无故的出问题来着。开始分析问题,查看网络请求,发现空白页面一个请求都没有发出,不寻常。猜测是不是哪里打了断点导致的。......
  • vue - 父子组件生命周期
    vue-父子组件生命周期题目Vue的父组件和子组件生命周期钩子函数执行顺序?Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子m......
  • vue 生命周期钩子
    生命周期钩子函数描述beforeCreate创建Vue实例之前调用created创建Vue实例成功后调用(可以在此处发送异步请求后端数据)beforeMount渲染DOM之前调用mounted渲染DOM之后调用,这时候可以向后端发送数据了beforeUpdate重新渲染之前调用(数据更新等操作时,控制D......
  • spring生命周期
    1:Bean的建立:容器寻找Bean的定义信息并将其实例化。2:属性注入:使用依赖注入,Spring按照Bean定义信息配置Bean所有属性3:BeanNameAware的setBeanName():如果Bean类有实现org.springframework.beans.BeanNameAware接口,工厂调用Bean的setBeanName()方法传递Bean的ID。4:BeanFactoryAw......
  • 以React16.4为界限,比较生命周期的异同
    一、整体流程简介:新版:旧版:二、比较通过两个图的对比,可以发现:1.生命周期都包含创建、更新、销毁;2.新版本减少了以下三种方法:componentWillMountcomponentWillReceivePropscomponentWillUpdate其实这三个方法仍然存在,只是在前者加上了UNSAFE_前缀,如UNSAFE_componentW......
  • Spring 中 bean 的生命周期
    Spring中的bean指的是被IoC管理的对象,通常都是以DI的方式来使用,并不需要手动管理它们的生命周期。但是,有时候我们需要对特定的bean进行额外的初始化、销毁操作,此时就可以通过Spring中的拓展接口来实现。基本生命周期Spring中IoC的顶层接口是BeanFactory,默认实现......
  • Vue 生命周期
    https://www.bilibili.com/video/BV1ub4y1i78b?p=2 第五章什么是vue3的生命周期https://www.bilibili.com/video/BV1ua4y1u7N8/  Vue生命周期created,mounted        Created和mounted的区别Created:是在组件实例一旦创建完成的时候立即调......
  • servlet的生命周期及线程问题
    1.servlet对象的产生,是在第一次使用servlet的时候由Tomcat创建,由Tomcat调用构造方法创建的对象。之后再使用这个servlet就直接使用创建好的对象。servlet在Tomcat服务器中是单实例。2.init()在创建servlet后只调用一次。可以初始化一些公用的函数。通常我们直接使用父类的init就......
  • Spring6 当中 Bean 的生命周期的详细解析:有五步,有七步,有十步
    1.Spring6当中Bean的生命周期的详细解析:有五步,有七步,有十步@目录1.Spring6当中Bean的生命周期的详细解析:有五步,有七步,有十步每博一文案1.1什么是Bean的生命周期1.2Bean的生命周期"五步"1.3Bean的生命周期“七步”1.4Bean的生命周期“十步”2.Bean的作用域不......
  • Vue入门到关门之生命周期钩子
    一、生命周期钩子函数1、什么是生命周期?在软件开发中,"生命周期"通常指的是一个对象从创建到销毁的整个过程。在前端开发中,特别是在使用诸如Vue.js、React等框架的情况下,"生命周期"常常指的是组件或实例在其存在期间经历的一系列阶段。在Vue.js中,每个Vue实例都有一个生命周期,它......