Hook useEffect

引入

import React, { useState, useEffect } from 'react'

useEffect 可以实现三个生命周期 和实现 数据监听watch

三个生命周期

页面结构加载完成  componentDidMount(）

页面离开销毁  componentwillUnmount()

页面更新完成 和 数据监听  componentDidUpdate()

页面结构加载完成 在这里写数据请求

 const [num, setnum] = useState(100)

    useEffect(() => {        //页面结构加载完成

        setTimeout(() => {
            setnum(num + 100)
        }, 2000)

    }, [])

页面离开

 useEffect(() => {          //页面离开

        return () => {
            console.log("我离开了")
        }
    }, [])

页面更新完成和数据监听 watch  监听num的数据变化  数据变了 就会触发这个函数

    useEffect(() => {      //页面更新 和 watch
        console.log(num)
    }, [num])