React-Hooks中的useEffect 代替常用生命周期函数

使用（componentDidMount 、componentDidUpdate）生命周期结果如下：

关键代码：

componentDidMount(){
        console.log(`componentDidMount---the count num is ${this.state.count} `)
    }
componentDidUpdate(){
        console.log(`componentDidUpdate--the count num is ${this.state.count} `)
    }

完整代码：

import React, { Component } from 'react';
 class Example extends Component{
     constructor(props){
        super();
        this.state={
            count:0
        } 
     }
    addNum = () =>{
        this.setState({
            count:this.state.count + 1
        })
    }
    componentDidMount(){
        console.log(`componentDidMount---the count num is ${this.state.count} `)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate--the count num is ${this.state.count} `)
    }
     render(){
         return(
             <div>
                    <p>this num is {this.state.count}</p>
                    <button onClick={this.addNum}>click me</button>
             </div>
         )
     }
 }
 export default Example;

使用useEffect 如下：

关键代码：

useEffect(() =>{
    console.log(`effect ----the count is ${count}`)
})

完整代码：

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

function Example (){
    const [count,setCount] = useState(0);
    useEffect(() =>{
        console.log(`effect ----the count is ${count}`)
    })
    return(
        <>
            <p>the num is {count}</p>
            <button onClick={()=>{setCount(count+1)}}>click me </button>
        </>
    )
}
export default Example;

总结：
（1）React首次渲染和之后的每次渲染都会调用 useEffect 函数。而之前我们要使用两个生命周期函数 componentDidMount（首次渲染） 和 componentDidUpdate （重新渲染）
（2）useEffect 中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数的执行时异步的。 而componentDidMount 和 componentDidUpdate中的代码都是同步执行的。