我们前面花了大量篇幅，从基础、理论、实践、总结几个方面，全方位的为大家分析了 useEffect。除此之外，React还提供了一个与useEffect几乎一样的hook，它就是useLayoutEffect。我们约定，useEffect传入的第一个参数为effect，useLayoutEffect传入的第一个参数为layoutEffect。他们的语法为：//中括号表示参数可选useEffect(effect[,deps])useLayoutEffect(layoutEffect[,deps])两个hook有高度相似的语义。第一个参数layoutEffect为一个函数，定义为副作用执行逻辑，我们

Effect数据结构顾名思义，React底层在函数式组件的Fiber节点设计中带入了hooks链表的概念（memorizedState），在此变量上专门存储每一个函数式组件对应的链表。而对于副作用（useEffect or useLayoutEffect）来说，对应其hook类型就是Effect。单个的effect对象包括以下几个属性：create:传入useEffect or useLayoutEffect函数的第一个参数，即回调函数；destroy:回调函数return的函数，在该effect销毁的时候执行，渲染阶段为undefined；deps:依赖项，改变重新执行副作用；next:指向

前言在React中针对DOM操作的最常见方法是使用refs来访问DOM节点，其实还有一种方法，就是使用useLayoutEffect来访问DOM节点，根据实际 DOM测量（例如元素的大小或位置）来更改元素。今天，我们就来讲讲useLayoutEffect如何处理DOM,还有从底层是如何实现的？好了，天不早了，干点正事哇。我们能所学到的知识点前置知识点useEffect导致布局闪烁使用useLayoutEffect修复闪烁问题浏览器如何渲染页面useEffectvsuseLayoutEffect在Next.js和其他SSR框架中使用useLayoutEffect1.前置知识点「前置知识点」，只是