react生命周期钩子函数 VS react-hooks

类组件一般使用react生命周期完成业务逻辑，而函数式组件使用react-hooks完成业务逻辑。

实例：

要实现的业务逻辑：当count为偶数时输出count（包括初始时）

一、类组件（需要两个钩子函数才能完成业务逻辑：componentDidMount和componentDidUpdate）

import React from 'react';
class ClassComp extends React.Component {
    constructor(props) {
        super(props);
    }
    state = { count: 0, disabled: true }
    // 使用生命周期钩子函数实现逻辑：count为偶数时，输出count(要使用两个生命周期钩子函数)
    // 1.判断初始时
    componentDidMount() {
        if (this.state.count % 2 == 0) {
            console.log(this.state.count);
        }
    }
    // 2.判断组件更新时
    componentDidUpdate() {
        if (this.state.count % 2 == 0) {
            console.log(this.state.count);
        }
    }
    
    render() {
        return (

             this.setState({ disabled: !this.state.disabled })}>{this.state.disabled ? '禁用' : '启用'}
            

                class component {this.state.count}  

                 this.setState({ count: this.state.count + 1 })}>变化
            
        
)
    }
}

export default ClassComp;

二、函数式组件（只需要一个钩子函数useEffect）

useEffect（ func，[ ] ）其中func是回调函数 ，[ ]里面是依赖，只有当[ ]里面的内容发生改变时，才会调用func函数

import React, { Component, useState, useEffect } from 'react';


export default function FuncComp() {
    const [count, setCount] = useState(0)
    const [disabled, setDisabled] = useState(true)

    // 想实现的逻辑：count是偶数是就打印count（包括初始时）
    //使用react-hooks：useEffect(func,[])   [params] params是依赖，就是当params发生变化时才会触发该钩子函数
    useEffect(() => {
        if (count % 2 === 0) {
            console.log(count);
        }
    }, [count])

    return (
        

             setDisabled(!disabled)}>{disabled ? '禁用' : '启用'}
            

                hello function component {count}
                 setCount(count + 1)}>变化
            
        
    )
}