useEffect和useLayoutEffect作为组件的副作用,本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段,生成effect,并将它们拼接成链表,存到fiber.updateQueue上,最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同,一个异步一个同步,这使得useEffect不会阻塞渲染,而useLayoutEffect会阻塞渲染。
简单总结: 都是在render函数执行后执行,useLayoutEffect是在DOM渲染阶段前,useEffect是在DOM渲染阶段后。? ? ? ?
使用时机: 通常useLayoutEffect用在在渲染阶段前,需要重新改变某个元素的位置的时候。 但可能会造成渲染阻塞。