useEffect底层实现原理，useEffect和useLayoutEffect的区别

useEffect链表
通过MountEffect方法把callback/依赖项加入到链表中
视图更新完毕，基于UpdateEffect方法通过effect链表中的callback按照要求执行

useEffect和useLayoutEffect

组件渲染过程
1.基于react-app编译,基于babel-preset-react-app把jsx编译成createElement格式
2.把createElement执行，创建virtualDOM
3.DOM-DIFF 渲染为真实dom
3.1.root.render方法，需要的DOM对象都创建出来 //useLayoutEffect
3.2.浏览器绘制和渲染 //useEffect

如果链表中的callback执行又修改了状态值【视图更新】对于useEffect来讲：
第一次真实DOM已经渲染，组件更新会重新渲染真实DOM；所以频繁切换的时候，会出现样式/内容闪烁
对于useLayoutEffect来讲，第一次真实DOM还未渲染，遇到callback中修改状态，视图立即更新，创建出新的virtualDOM合并在一起渲染为真实DOM，也就是在此类需求下，真实DOM值渲染一次，不会出现样式/内容闪烁
useLayoutEffect会优于useEffect先执行
useLayoutEffect
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。
可以使用它来读取 DOM 布局并同步触发重渲染。
在浏览器执行绘制之前（还没有绘制成真实DOM），useLayoutEffect 内部的更新计划将被同步刷新。
useLayoutEffect会阻塞浏览器真实DOM，优先执行Effect链表中的callback
尽可能使用标准的 useEffect 以避免阻塞视觉更新。