react扩展4_EffectHook

在上一文中，我们已经能够模拟出函数式组件的state状态了，但是还没有办法能模拟出生命周期。今天我们来使用另一个Hook———EffectHook来模拟函数式组件的生命周期。
我们同样用一个实例来向大家讲解。

需求如下：
1.一个原始值为0的变量，每经过1秒，自增1.
2.点击卸载组件的按钮可以将整个组件卸载
3.在卸载之前需要将定时器关掉

在类式组件中，我们完全可以使用componentDidMount、componentDidUpdate和componentWillUnmount的生命周期来实现。在函数式组件中，我们可以借助EffectHook来模拟出同样的效果。

语法说明：

useEffect(()=>{
	//在此可以执行任何带副作用的操作
	return()=>{//在组件卸载前执行
		//在此做一些收尾的工作，比如清除定时器、取消订阅等
	}
},[stateValue])
//如果指定的是[],相当于不监控任何state，那么回调函数只会在第一次render（）后执行，相当于componentDidMount。
//如果没有写[],相当于监控所有的state，也就是说所有的stateValue发生改变的时候都会调用一次回调函数，这个时候的EffectHook相当于componentDidMount和componentDidUpdate。
//如果指定了某个值，那么将在指定值发生改变的时候执行回调函数。

也就是说，可以把useEffect Hook看做是componentDidMount、componentDidUpdate和componentWillUnmount的组合。

import React from 'react'
import ReactDOM from 'react-dom'

export default function Demo(){
    const [count,setCount]=React.useState(0);

    React.useEffect(()=>{
        let timer=setInterval(()=>{
            setCount(count=>{return count+1})
        },1000)
        return ()=>{
            clearInterval(timer)
        }
    },[])
    
    const add=()=>{
        // setCount(count+1)
        setCount(count=>{return count+1})
    }
    const unmount=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    return (
        <div>
            <h2>当前求值为:{count}</h2>
            <button onClick={add}>点击+1</button>
            <button onClick={unmount}>点击卸载</button>
        </div>
    )
}