react hook 生命周期

官方文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

直接上代码：

代码语言：javascript复制

'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'))

可参考官网effect一节

效果：

初始化

点击按钮

再次点击，销毁

官方文档

0 人点赞