面试官:useLayoutEffect和useEffect的区别
面试官:useLayoutEffect和useEffect的区别
hello,这里是潇晨,大家面试的过程中有没有遇到过这样的问题呢,useLayoutEffect和useEffect的区别是什么,大家可能会回答useEffect是异步的,useLayoutEffect是同步的,这样回答面试官真的会满意慢,我们需要说清楚他们在源码中的调用时机。
先来看个例子:点击触发更新之后,如果count之前的状态是0,我们随机生成一个数字,在阻塞一段时间,在设置count位随机值,看看在useEffect和useLayoutEffect这两种情况下会有什么不同
import React, { useLayoutEffect, useState, useEffect } from "react";export default function App() {const [count, setCount] = useState(0);//用 useLayoutEffect 试试useEffect(() => {if (count === 0) {const randomNum = Math.random() * 100;//随机生成一个数字const now = performance.now();while (performance.now() - now < 100) {//阻塞一段时间console.log('blocking...');}setCount(randomNum);//重新设置状态,设置成随机数}}, [count]);return <div onClick={() => setCount(0)}>{count}</div>;
}//在useEffect的情况下,不断点击触发更新,偶尔会显示0
//在useLayoutEffect的情况下,不断点击触发更新,不会偶现0
在源码中不管首次渲染还是更新的时候都会经历一个阶段叫commit阶段,这个阶段主要的工作就是处理一些钩子函数、生命周期、遍历render阶段形成的EffectList链表,将带有副作用的Fiber节点应用到真实节点上,如果对render阶段不了解可以参阅往期文章 render阶段 ,下面这张图是commit阶段源码的结构图,我们详细的讲解一下。
在commitRootImpl的函数中主要分三个部分:
- commit阶段前置工作
- mutation阶段
- 调用commitBeforeMutationEffects,scheduleCallback调度执行flushPassiveEffects
- 调用commitMutationEffects,处理相关的副作用,操作真实节点useLayoutEffect的销毁函数在这个函数中执行
- 调用commitLayoutEffects,调用commitLayoutEffects的回调函数,这个时候副作用已经应用到真实节点了,所以能拿到最新的节点。
- 在commit阶段结束之后flushPassiveEffects执行useEffect的销毁函数和回调函数。
- commit阶段收尾工作
所以useLayout/componentDidMount和useEffect的区别是什么?
答:他们在commit阶段不同时机执行,useEffect在commit阶段结尾异步调用,useLayout/componentDidMount同步调用
详细源码调试视频(高效学习):点击学习
往期react源码解析文章:
1.开篇介绍和面试题
2.react的设计理念
3.react源码架构
4.源码目录结构和调试
5.jsx&核心api
6.legacy和concurrent模式入口函数
7.Fiber架构
8.render阶段
9.diff算法
10.commit阶段
11.生命周期
12.状态更新流程
13.hooks源码
14.手写hooks
15.scheduler&Lane
16.concurrent模式
17.context
18事件系统
19.手写迷你版react
20.总结&第一章的面试题解答
面试官:useLayoutEffect和useEffect的区别相关推荐
- (每日一题)面试官:深拷贝浅拷贝的区别?如何实现一个深拷贝?
一.数据类型存储 前面文章我们讲到,JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象 ...
- 【真实面试经历】我和阿里面试官的一次“邂逅”(附问题详解)
本文的内容都是根据读者投稿的真实面试经历改编而来,首次尝试这种风格的文章,花了几天晚上才总算写完,希望对你有帮助..已经收录自 Guide 哥开源的 JavaGuide 中.本文主要涵盖下面的内容: ...
- 腾讯面试题:char 和 varchar的最大长度是多少,以及他们之间的区别(看完你就能和面试官笑谈人生了)
title: 腾讯面试题:char 和 varchar的最大长度是多少,以及他们之间的区别(看完你就能和面试官笑谈人生了) tags: 面试常见题 腾讯面试题:char 和 varchar的最大长度是 ...
- 面试官:兄弟,说说 ArrayList 和 LinkedList 有什么区别
作者 | 沉默王二 来源 | 沉默王二(ID:cmower) ArrayList 和 LinkedList 有什么区别,是面试官非常喜欢问的一个问题.可能大部分小伙伴和我一样,能回答出"Ar ...
- firefox 接受post 不完整_面试官想听到的GET和POST两种基本请求方法的区别
前言 HTTP定义了与服务器交互的不同方法,最常用的方法有四种Put,Delete.post,get,即增删改查. 1.Get,它用于获取信息,它只是获取.查询数据,也就是说它不会修改服务器上的数据, ...
- 面试官:react和vue有什么区别吗?
前言 大家好呀,清明节这两天有没有出门踏青扫墓呢!!! 言归正传,这是作者面试系列的第二篇文章!!!!!!! react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开 ...
- swf缓存文件在哪里_面试官:mybatis一级缓存二级缓存的区别都不知道,知道门在哪吧...
面试官:虫虫你简历上写了了解mybatis缓存,那你能说说一级缓存和二级缓存的区别吗? 虫虫:我只知道这是用来缓存sql查询的数据 面试官:没了? 虫虫:没了 面试官:公司门知道在哪里吧 自己走还是我 ...
- 307 跳转会携带请求方法吗_面试官:GET和POST两种基本请求方法有什么区别
点击上方蓝色"后端面试那些事儿",选择"设为星标" 学最好的别人,做最好的我们 来源:r6d.cn/j26B GET和POST是HTTP请求的两种基本方法,要说 ...
- 面试官:GET和POST两种基本请求方法有什么区别
点击上方"朱小厮的博客",选择"设为星标" 后台回复"书",获取 来源:r6d.cn/j26B GET和POST是HTTP请求的两种基本方法 ...
最新文章
- python: ImportError:DLL load failed 解决方法。
- Android/Ophone中的悬浮对话框和即点即关对话框
- 性能测试TPS与用户之间转换
- git 使用详解(8)-- tag打标签
- mysql 修改root用户密码
- IOS学习之多线程(9)--NSOperation简单介绍
- ajax数据传送中文乱码,springmvc 发送ajax出现中文乱码的解决方法汇总
- OpenGL使用模板缓冲区和剪切平面
- IE8 select 动态下拉遇到的问题
- mysql-数据库操作-连接-创建-删除-修改编码-查询-切换
- 山东财经大学计算机体系结构考试题,2016年山东财经大学计算机科学与技术学院数据库系统原理与程序设计复试笔试仿真模拟题...
- Server Tomcat v8.0 Server at localhost failed to start.
- 牛人也得看的CSS常识
- 约4万个外国人名,中英对照
- VLAN 间路由配置
- Microsoft Word 2010 - 清除格式
- 《活出生命的意义》读后感
- OpenCV框架与图像插值算法
- 10.24程序员节疑问:沈从文的编程功底应该很厉害吧?
- AIO-3588MQ 车规级AI主板
热门文章
- android 模拟器方向键,Android模拟器对应键盘快捷键
- vue---安装使用vue-layer弹框插件
- 使用@WebFilter指定urlPatterns失效问题
- [JavaScript 刷题] 树 - 完全二叉树的节点个数, leetcode 222
- Task3:Selenium模块学习及丁香园模拟登录爬取留言板
- 详解自注意力机制及其在LSTM中的应用
- 机器学习之Boltzmann 机算法
- 【历史上的今天】7 月 16 日:磁盘驱动器之父诞生;VisiCalc 创造者出生;Slackware Linux 首次发布
- Win8系统中如何显示/隐藏文件扩展名
- HTML下拉选框加倒三角,CSS给选中元素增加倒三角形