ReactHooks useEffect代替周期函数

非hooks写法

import React, { Component } from 'react';

class Example3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count:0
        }
    }
    componentDidMount(){
        console.log(`componentDidMount=>You clicked${this.state.count}times`)
    }
    componentDidUpdate(){
        console.log(`componentDidUpdate=>You clicked${this.state.count}times`)
    }
    render() { 
        return (
            <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={this.addCount.bind(this)}>Click</button>
        </div>
        );
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
}
 
export default Example3;

hooks写法

import React, { useState , useEffect} from 'react';
function Example(){
    const [ count, setCount ] = useState(0)//数组解构
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count}times`)
    })
    return(
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click</button>
        </div>
    )
}
export default Example;

利用useEffect综合了componentDidMount和componentDidUpdate的功能。