React之ReactHook与生命周期

useEffect

useEffect第一个参数为callback，返回destory，destory作为下一次callback执行前调用，用于清除上一次callback产生的副作用。

第二个参数为依赖项，是一个数组，可以有多个依赖性，依赖项改变，执行上一次callback返回的destory，和执行新的effect第一个参数callback。

对于 useEffect 执行， React 处理逻辑是采用异步调用 ，对于每一个 effect 的 callback， React 会向 setTimeout回调函数一样，放入任务队列，等到主线程任务完成，DOM 更新，js 执行完成，视图绘制完毕，才执行。所以 effect 回调函数不会阻塞浏览器绘制视图。

useLayoutEffect

useLayoutEffect 与useEffect 不同的是，它采用的是同步执行。

1. useLayoutEffect是在DOM更新之后，游览器绘制之前，（也就是说，它执行的时候，DOM是已经更新了的，只不过游览器还没有绘制）这样可以方便修改DOM，获取DOM信息，但是这样游览器只会绘制一次，如果修改DOM布局放在useEffect，那么useEffect执行是在游览器绘制试图之后，接下来又改DOM，就可能会导致游览器再次回流跟重绘。

2. 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还没有更新。

它的产生是基于如下条件：

1. useLayoutEffect执行的时候DOM已经更新完成了，布局也是已经确定了，剩下的就是交给游览器绘制。

2. 如果在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>
}