useEffect模拟生命周期

　　模拟componentDidMount hooks模拟componentDidMount useEffect拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程。

　　第二个参数是一个数组

　　- 当数组存在并有值时，如果数组中的任何值发生更改，则每次渲染后都会触发回调。

　　- 当它不存在时，每次渲染后都会触发回调。

　　- 当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。 useEffect(()=>{console.log('第一次渲染时调用')},[]) 模拟componentDidUpdate没有第二个参数代表监听所有的属性更新useEffect(()=>{console.log('任意属性该改变')}) 监听多个属性的变化需要将属性作为数组传入第二个参数。

　　useEffect(()=>{console.log('n变了')},[n,m]) 模拟componentWillUnmount通常，组件卸载时需要清除effect创建的诸如订阅或计时器ID等资源useEffect函数返回的函数可以表示组件卸载了useEffect(()=>{ const timer = setTimeout(()=>{ ... },1000) return()=>{ console.log('组件卸载了') clearTimerout(timer) } })

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。