组件

一、定义

组件是抽象的独⽴立功能模块，react应⽤用程序由组件构建⽽而成。

二、组件的两种形式

1、组件有两种形式：function组件和class组件
2、class组件通常拥有状态和生命周期，继承于Component，实现render方法。

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

3、函数组件通常无状态，仅关注内容展示，返回渲染结果即可

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

PS：从React16.8开始引⼊入了了hooks，函数组件也能够拥有状态

三、组件的状态管理

1、类组件中的状态管理：class组件使⽤用state和setState维护状态，简单定时器示例如下：

import React, { Component } from "react";

class Test extends React.Component {
    constructor(props) {
        super(props);
        // 使⽤用state属性维护状态，在构造函数中初始化状态
        this.state = { date: new Date() };
    }
    componentDidMount() {
        // 组件挂载时启动定时器器每秒更更新状态
        this.timerID = setInterval(() => {
            // 使⽤用setState⽅方法更更新状态
            this.setState({
                date: new Date()
            });
        }, 1000);
    }
    componentWillUnmount() {
        // 组件卸载时停⽌止定时器器
        clearInterval(this.timerID);
    }
    render() {
        return <div>{this.state.date.toLocaleTimeString()}</div>;
    }
}
export default Test;

2、函数组件中的状态管理：函数组件通过hooks api维护状态

import React, { useState, useEffect } from "react";

export default function Home() {
    // hooks管理状态
    const [date, setDate] = useState(new Date());
    // 更新
    useEffect(() => {
        const timeId = setInterval(() => {
            setDate(new Date());
        }, 1000);
        return () => clearInterval(timeId);
    });
    return <div>{date.toLocaleTimeString()}</div>;
}