react hook 生命周期

'use strict';

function LikeButton() {
    const [liked, setLiked] = React.useState(false)
    const [count, setCount] = React.useState(0)

    React.useEffect(() => {
        // 只执行一次
        setInterval(() => setCount(state => ++state), 1000)
    }, [])

    return (
        <button onClick={() => setLiked(!liked)} >
            {liked ? <ButtonText count={count} /> : '不喜欢'}
        </button>
    );
}
function ButtonText({ count }) {

    React.useEffect(() => {
        // 只执行一次
        console.log`我来了`
        // 组件销毁时执行一次
        return () => console.log`我溜了`
    }, [])

    React.useEffect(() => {
        // 当props.count发生变更时触发
        console.log`${{ count }}`
    }, [count])

    React.useEffect(() => {
        // 有变更时触发
        console.log`风吹草动`
    })


    return (
        <div>{count}</div>
    )
}
ReactDOM.render(<LikeButton />, document.querySelector('#like_button_container'))