hook-模拟生命周期函数

1 .组件生命周期操作依赖于useEffect hook

模拟componentDidMount

1 .如果需要在挂载时更新请求一些资源，并且需要在卸载时释放这些资源，还是推荐使用useEffect，放在一起，方便维护

export default function useOnMount(fn: Function) {
  useEffect(() => {
    fn()
  }, []) // 第二个参数设置为[], 表示不必对任何数据， 所以只在首次渲染时调用
}

模拟componentWillUnmount

export default function useOnUnmount(fn: Function) {
  useEffect(() => {
    return () => {
        fn()
    }
  }, [])
}

模拟componentDidUpdate

1 .这个感觉也没啥必要，不就是useEffect的传入依赖函数吗？这个只是把那些都提了出来，换了一个角度来实现需求
import {useEffect,useRef} from 'react'
export default function useOnUpdate(fn,dep){
    const ref=useRef({fn,mounted:false})
    ref.current.fn=fn

    useEffect(()=>{
        if(!ref.current.mounted){
            ref.current.mounted=true
            // 首次渲染不执行
        }else{
            ref.current.fn()
        }
    },dep)
}

2 .使用
useOnUpdate(()=>{
        console.log('num发生了变化')
        handleRemove()
    },[num])