useEffect
useEffect第一个参数为callback，返回destory，destory作为下一次callback执行前调用，用于清除上一次callback产生的副作用。
第二个参数为依赖项，是一个数组，可以有多个依赖性，依赖项改变，执行上一次callback返回的destory，和执行新的effect第一个参数callback。
对于 useEffect 执行， React 处理逻辑是采用异步调用 ，对于每一个 effect 的 callback， React 会向 setTimeout回调函数一样，放入任务队列，等到主线程任务完成，DOM 更新，js 执行完成，视图绘制完毕，才执行。所以 effect 回调函数不会阻塞浏览器绘制视图。
useLayoutEffect
useLayoutEffect 与useEffect 不同的是，它采用的是同步执行。
useLayoutEffect是在DOM更新之后，游览器绘制之前，（也就是说，它执行的时候，DOM是已经更新了的，只不过游览器还没有绘制）这样可以方便修改DOM，获取DOM信息，但是这样游览器只会绘制一次，如果修改DOM布局放在useEffect，那么useEffect执行是在游览器绘制试图之后，接下来又改DOM，就可能会导致游览器再次回流跟重绘。
uselayoutEffect 的 callback中代码执行会阻塞游览器绘制
总结
useEffect 和 useLayoutEffect的区别： 修改DOM，改变布局就用useLayoutEffect，其它全用useEffect。
问： useEffect 与 componentDIdMout 以及 componentDidUpdate执行时机有什么样的区别？
答：useEffect对react是异步执行，而componentDIdMount 以及 componentDidUpdate是同步执行。useEffect不会阻塞游览器绘制。
useInsertionEffect - react 18 新hook
useInsertionEffect的出现，本质上是为了解决css-in-js 在渲染中注入样式的性能问题。
它的执行是高于useLayoutEffect的。它执行的时候，DOM还没有更新。
它的产生是基于如下条件：
useLayoutEffect执行的时候DOM已经更新完成了，布局也是已经确定了，剩下的就是交给游览器绘制。
如果在useLayoutEffect动态生成style标签，那么会再次影响布局，导致游览器再次重回和重排。
这时候useInsertionEffect 就出现了，它的执行是在DOM更新之前，所以此时使用css-in-js避免了游览器再次出现重回重排的可能。
模拟：
效果：
页面初始化执行-useEffect useEffect(() => { // 请求数据，事件监听，操纵dom },[]) 页面卸载执行 - use Effect+ componentWillUnmount useEffect(() => { return function componentWillUnmount(){ // 解除事件监听，清除计时器，延时器。 } },[]) 组件更新完成 useEffect(() => { console.log("组件更新完成") })
生命周期模拟代码
import React,{useState} from "react" function FunctionLifecycle(props){ const [ num , setNum ] = useState(0) React.useEffect(()=>{ /* 请求数据 ， 事件监听 ， 操纵dom ， 增加定时器 ， 延时器 */ console.log('组件挂载完成：componentDidMount') return function componentWillUnmount(){ /* 解除事件监听器 ，清除 */ console.log('组件销毁：componentWillUnmount') } },[])/* 切记 dep = [] */ React.useEffect(()=>{ console.log('props变化：componentWillReceiveProps') },[ props ]) React.useEffect(()=>{ /* */ console.log(' 组件更新完成：componentDidUpdate ') }) return <div> <div> props : { props.number } </div> <div> states : { num } </div> <button onClick={ ()=> setNum(state=>state + 1) } >改变state</button> </div> } // eslint-disable-next-line import/no-anonymous-default-export export default ()=>{ const [ number , setNumber ] = React.useState(0) const [ isRender , setRender ] = React.useState(true) return <div> { isRender && <FunctionLifecycle number={number} /> } <button onClick={ ()=> setNumber(state => state + 1 ) } > 改变props </button> <br/> <button onClick={()=> setRender(false) } >卸载组件</button> </div> }
