useffect 模拟生命周期 及与useLayoutEffect的区别

一 useffect
1 模拟componentDidMount
第二个参数为一个空数组，可以模拟componentDidMount

componentDidMount：useEffect(()=>{console.log('第一次渲染时调用')},[])
2 模拟componentDidUpdate
没有第二个参数代表监听所有的属性更新

useEffect(()=>{console.log('任意状态改变')})
监听多个属性的变化需要将属性作为数组传入第二个参数。

useEffect(()=>{console.log('指定状态改变')},[状态1,状态2...])
3 模拟componentWillUnmount
useEffect(()=>{ ... return()=>{ //组件卸载前} })

二 useLayoutEffect
useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发；useLayoutEffect 可能会影响性能
useEffect在组件渲染后(DOM 更新之后)执行副作用函数,这意味着它是异步执行的,不会阻塞页面的渲染。useLayoutEffect在 DOM 更新之后、浏览器执行绘制之前同步执行副作用函数。因此,它的执行时机比useEffect更早,可能会阻塞页面的渲染。

useLayoutEffect 的使用场景：

1. 当副作用函数中包含对 DOM 的操作，并且需要立即更新 DOM 以确保用户看到一致的界面时，可以考虑使用 useLayoutEffect。
   2 适用于需要立即更新 DOM 的副作用逻辑，比如测量 DOM 尺寸、操作 DOM 元素的样式、对焦等。
   3 当有些副作用依赖于浏览器布局和绘制时，或者需要在渲染前同步执行副作用逻辑时，可以选择 useLayoutEffect。