5. hooks-practice

useEffect

• 让useEffect里的代码只执行5次

export default () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        setTimeout(()=>{
            setCount(x => x + 1)
        },1000)
    }, [Math.min(count, 5)])
}

• 对useEffect的理解
  • 类组件 在componengDidMount/componengDidUpdate以后才会有真实的dom渲染
    • getSnapshotBeforeUpdate 可以拿到上一次的dom
    • 这中间是react update dom and refs
    • componentDidUpdate拿到最新的dom
    • 对比之后将dom渲染到页面
  • effect hook 是在整个dom渲染完成以后才会执行传入useEffect的函数，在真实dom构建以后执行（componengDidMount/componengDidUpdate是在真实dom构建之前执行）
  • 因为useEffect是异步的，即传入useEffect里的函数是异步执行的
  • 传入useEffect里的函数是一个闭包
  • 为什么在组件内部调用useEffect？
    • 这样可以在effect中直接访问state变量或者其他props，已经保存在函数作用域中，使用了闭包机制
  • useEffect会在每次渲染后都执行吗？
    • 是的。每次运行effect时，dom都已经更新完毕
  • 清理函数是在每一次执行副作用函数之前运行 组件销毁的时候也会执行清理函数
  • 每一次副作用函数 都是不同的函数 是全新的

存在清理函数时：
1. render + effect
=> render + 清理函数 + effect
=> render + 清理函数 + effect
...