react函数组件模拟生命周期

React函数组件模拟生命周期

React Hooks提供React.useEffect来解决函数组件没有生命周期的问题

在React.useEffect（fn，？）第一个参数是特定实时机执行的回调函数，第二个参数是指什么时机

1.模拟componentDidMount第一次渲染

useEffect(() => {
    console.log('');
}, []) // 第二个参数为空时只会在第一次渲染时执行

2.　模拟componentDidUpdate

useEffect(() => {
    console.log('n变化了');
}, [n]) // 第二个参数为要监听的数据

不传第二个参数，则会在 state 的任意一个属性改变时
都会触发该函数回调useEffect(() => {
    console.log('任意属性变化');
})

3.模拟componentWillUnmount

通过函数里返回函数的方式

useEffect(() => {
    console.log('任意属性变了');
    return () => {
        console.log('该组件要销毁了');
    }
})

这篇好文章是转载于：学新通技术网