useLayoutEffect和useEffect有什么区别呢？

zhangguo2002

于 2025-04-17 23:53:55 发布

阅读量142

点赞数 3

CC 4.0 BY-SA版权

分类专栏： React面试题第一版文章标签：前端 javascript 开发语言 react.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zhangguo2002/article/details/147316161

React面试题第一版专栏收录该内容

32 篇文章

订阅专栏

useEffect的cb，准确的来说，是异步调用的，会等主线程任务执行完成，DOM更新，JS执行完成，视图绘制完成，才执行

useLayoutEffect的cb，是同步执行的，执行时机是DOM更新之后，视图绘制完成之前，这个时间可以更方便的修改DOM

如果要改DOM，用useLayoutEffect,其他都用useEffect

useInsertionEffect

useInsertionEffect比useLayoutEffect更早，useInsertionEffect执行时，DOM还没有更新

本质上uesInsertionEffect主要是解决CSS-in-JS在渲染中注入样式的性能问题

哪个和componentDidMount、componentDidUpdate更类似

componentDidMount、componentDidUpdate是同步的，所以useLayoutEffect更类似

博客等级

码龄4年

53
原创

242
点赞

195
收藏

635
粉丝

关注

私信

热门文章

分类专栏

上一篇：: 如何实现Vue中的expose的能力？

下一篇：: 什么是HOC，以及常用的方式？

最新评论

Win10系统使用geth搭建以太坊私有链
斯威特不甜: 停止挖矿强制退出应该是ctrl+D吧
正数与负数：原码、反码、补码相互转换（一看就会）
「已注销」: 这个好，，详细，适合脑子不灵光的我
正数与负数：原码、反码、补码相互转换（一看就会）
做而论道_CS: 所谓的：机器数符号位原码反码 ... 这些，都是计算机专家在【忽悠、卖拐】而已。正负数值，存入计算机，都是以 “补码” 存放的。计算机中，根本就没有原码和反码。除非，你自寻烦恼，偏要在计算机中，存入原码和反码。既然没有原码反码，那么，取反加一，计算机也就不能做了。其实，所谓的 “补码”，也是正常的数字。　也并非在二进制数才有。你看十进制吧，两位数：0 ~ 99。可以有：27 + 99 = (一百) 26 也可以：27 － 1 = 26 如果你忽略进位，依旧保持两位数，　这两种算法的功能，就是相同的！就是说，当你舍弃了进位：　负数，就能用正数代替；　加法，竟然就能实现减法运算！在计算机中，舍弃进位，会怎样？　就可以简化硬件。　用一个加法器，便可横行天下！由此可知，“补码”，根本就不是什么新鲜事。　“补码” 的关键，是：【舍弃进位】。　上过小学的人，都能理解这个！补码，并非是：符号位原码反码取反加一。　如果非要按照这思路来解释，你就是被人忽悠瘸了。－－－－－－－－－－－－用两位十进制运算时，舍弃进位，就是【减去一百】。那么，加 99，再减 100，当然就是 “－1” 了。计算机使用二进制数。八位二进制数是：0000 0000 ~ 1111 1111。相当于十进制数：0 ~ 255。如果出现 “进位 = 1”，就是：2^8 = 256。那么，加 255，再减 256，这也就是 “－1” 了。所以：+255 (1111 1111)，就是：－1；同理：+254 (1111 1110)，就是：－2；　　　+253 (1111 1101)，就是：－3；　　　。。。　。。。　　　+128 (1000 0000)，即：－128。以上 128 个正数，就是计算机专家 “发明” 的补码了。你肯定能看出关系式：　负数的补码 = 256 + 该负数。一般化，就是：　负数的补码 = 2^n + 该负数。　n，是二进制数的位数。例：求－31 的 “补码” 是多少？解：256－31 = 225 = 1110 0001 (二进制)。　这不就求出来了吗？　　哪还用琢磨什么：符号位原码取反。。。！　　　这还要啥自行车啊！谁要是跟老外学算术，　立刻、马上、直接，就掉坑里去了！
用VSCODE将Windows远程连接Linux（Ubuntu）
优快云-Ada助手: 恭喜您写了第7篇博客！看到您分享如何用VSCODE将Windows远程连接Linux（Ubuntu）的教程，觉得非常有用。希望您能继续保持创作的热情和耐心，不断分享更多技术经验和心得体会。或许下一步可以考虑分享如何利用VSCODE进行远程调试或者其他实用技巧，期待您的更多精彩内容！
MongoDB的环境搭建
优快云-Ada助手: 恭喜用户成功发布了第四篇博客“MongoDB的环境搭建”！不断分享自己的学习和经验真的很棒，希望你能继续坚持下去。或许下一步可以考虑分享一些MongoDB的实际应用案例或是一些技巧和最佳实践，让读者能更深入地了解这个领域。期待你的下一篇作品！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.youkuaiyun.com/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5

大家在看

最新文章

2025

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。