import React, { Component } from 'react'
export default class App extends Component {
    constructor(p){
        super(p)
        this.state = {num: 0}
    }
    render() {
        return (
            <div>
                <h2>{this.state.num}</h2>
                <button onClick={this.addNum.bind(this)}>累加</button>
            </div>
        )
    }
    componentDidMount(){
        console.log('Mount')
    }
    componentDidUpdate(){
        console.log('Update')
    }
    componentWillUnmount(){
    	consoloe.log('Unmount')
    }
    addNum(){
        this.setState({
            num: this.state.num+1
        })
    }
}

import React, { useState, useEffect } from 'react'
function App1(){
    const [num, setNum] = useState(0);
    const [num1, setNum1] = useState(1)
    /*
    1.第二個參數為空的情況：在初次渲染執行一次后，會監聽所有數據的更新，數據更新則會觸發useEffect()。（componentDidMount、componentDidUpdate）
    2.第二個參數為[]的情況:回調函數只會在第一次render()后執行。（componentDidMount）
    3.第二個參數為[監聽的元素]:在初次渲染執行一次后，只會監聽相應元素變化才會觸發回調函數。（componentDidMount、componentDidUpdate）
    4.useEffect體中使用了return為一個函數，會在組件卸載前執（componentWillUnmount）
    */
    useEffect(()=>{
        console.log('useEffect')
    }, [num])
    return (
    <div>
      <h1>{num}</h1>
      <button onClick={()=>setNum(num+1)}>累加</button>
      <h1>{num1}</h1>
      <button onClick={()=>setNum1(num1+1)}>累加</button>
    </div>
    )
}
export default App1;

useEffect(()=>{
	// 在此可以執行任何帶副作用操作
	return ()=> { // 在組件卸載前執行
		// 在此走一些收尾工作，如清除定時器/取消訂閱等
	}
},[stateValue])// 如果指定的是[]，回調函數只會在第一次render()后執行
//如果第二個參數不填，將會監聽所有數據的更新