hooks模拟生命周期

　　在React16.8 之前，函数组件只能是无状态组件，也不能访问react生命周期。hook做为react新增特性，可以让我们在不编写class的情况下使用state以及其他的react特性，例如生命周期。

　　接下来我们便举例说明如何使用hooks来模拟比较常见的class组件生命周期。

　　1. hooks模拟componentDidMount useEffect拥有两个参数：

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

　　第二个参数是一个数组

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

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

　　- 当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。 useEffect(()=>{console.log('第一次渲染时调用')},[])

　　2. hooks模拟shouldComponentUpdate React.memo包裹一个组件来对它的props进行浅比较,但这不是一个hooks，因为它的写法和hooks不同,其实React.memo等效于 PureComponent，但它只比较 props。 const MyComponent = React.memo( _MyComponent, (prevProps, nextProps) => nextProps.count !== prevProps.count )

　　3. hooks模拟componentDidUpdate没有第二个参数代表监听所有的属性更新useEffect(()=>{console.log('任意属性该改变')}) 监听多个属性的变化需要将属性作为数组传入第二个参数。useEffect(()=>{console.log('n变了')},[n,m])

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

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