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中的代码都是同步执行的。