useEffect 在全部渲染完毕后才会执行
useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
可以使用它来读取 DOM 布局并同步触发重渲染
在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
尽可能使用标准的 useEffect 以避免阻塞视图更新
function LayoutEffect() {
const [color, setColor] = useState('red');
useLayoutEffect(() => {
alert(color);
});
useEffect(() => {
console.log('color', color);
});
return (
<>
<div id="myDiv"
style={{ background: color }}>颜色</div>
<button onClick={() =>
setColor('red')}>红</button>
<button onClick={() =>
setColor('yellow')}>黄</button>
<button onClick={() =>
setColor('blue')}>蓝</button>
</>
);
}
useEffect优势
useEffect 在渲染结束时执行，所以不会阻塞浏览器渲染进程，
所以使用 Function Component 写的项目一般都有用更好的性能。
自然符合 React Fiber 的理念，因为 Fiber 会根据情况暂停或插队执行不同组件的 Render，
如果代码遵循了 Capture Value 的特性，在 Fiber 环境下会保证值的安全访问，
同时弱化生命周期也能解决中断执行时带来的问题。
useEffect 不会在服务端渲染时执行。由于在 DOM 执行完毕后才执行，
所以能保证拿到状态生效后的 DOM 属性。