React类组件

说明：React 16.8 版本引入了 Hook，从这个版本开始，开发者可以使用函数组件结合 Hook 的方式来替代类组件开发 React 应用，以实现更简洁的代码和更好的可维护性。

当然，React 并没有强制要求必须使用 Hook 而不能使用类组件，在 React 生态中两种开发方式可以并存。但随着时间的推移，越来越多的项目倾向于使用函数组件和 Hook 的组合。

类组件基础结构

类组件就是通过JS中的类来组织组件的代码
1.通过类属性state定义状态数据
2.通过setState方法来修改状态数据
3.通过render来写UI模板（JSX语法一致）

import {Component} from "react";

class Counter extends Component {
    //  定义状态变量
    state = {
        count: 0
    }
    // 定义事件回调
    setCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return <button onClick={this.setCount}>{this.state.count}</button>
    }
}

function App() {
    return (
        <div>
            <Counter/>
        </div>
    );
}

export default App;

类组件的生命周期函数

组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数
1.componentDidMount：组件挂载完毕自动执行（异步数据获取）
2.componentWillUnmount：组件卸载时自动执行（清理副作用）

import {Component, useState} from "react";

class Son extends Component {
    // 声明生命周期函数
    // 组件渲染完毕执行一次：发送网络请求
    componentDidMount() {
        console.log('组件渲染完毕');
        // 开启定时器
        this.timer = setInterval(() => {
            console.log('执行定时器');
        }, 800);
    }

    // 组件卸载时执行
    componentWillUnmount() {
        console.log('组件被卸载');
        // 清除定时器
        if (this.timer){
            clearInterval(this.timer);
        }
    }
    render() {
        return <div>子组件</div>
    }
}


function App() {
    const [state,setState] = useState(true);
    return (
        <div>
            { state && <Son/> }
            <button onClick={() => setState(false)}>点击</button>
        </div>
    );
}

export default App;

类组件的组件通信

类组件和Hooks编写的组件在组件通信的思想上完全一致
1.父传子：通过prop绑定数据
2.子传父：通过prop绑定父组件中的函数，子组件调用
3.兄弟组件：状态提升，通过父组件做桥接

import {Component} from "react";

// 子组件
class Son extends Component {
    render() {
        return <div>
            子组件:{this.props.name}
            <button onClick={() => this.props.onGetSonName('lala')}>调用父组件函数</button>
        </div>

    }
}

// 父组件
class Parent extends Component {
    state = {
        name: 'macy'
    }

    getName = (sonName) => {
        console.log('---:', sonName)
    }
    render() {
        return <div>
            父组件
            <Son name={this.state.name} onGetSonName={this.getName}/>
        </div>
    }
}

function App() {
    return (
        <div>
           <Parent/>
        </div>
    );
}