React组件的两种形式

react组件有两种形式：
class 和 function
1、class组件
class组件通常拥有状态和生命周期，继承与component，实现render方法
创建Home组件：

import React, { Component } from 'react'

export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: 'create-react-app',
        }
    }
    render() {
        const { data } = this.state;
        return (
            <div>
                <h1>我是Home</h1>
                <p>{data}</p>
            </div>
        )
    }
}

2、function组件
(function:适合短小精悍的
管理状态：使用hooks useState,useEffect React 16.8.0提出来的)

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

export default function Hooks() {
    /*
     管理多个状态就设置多个useState:
     状态过多建议使用class组件
    */
    const [state, setstate] = useState(new Date());
    //useEffect参数是一个函数：
    useEffect(() => {
        const timer = setInterval(()=>{
            setstate(new Date());
        },1000)
    })
    return (
        <div>
            <h1>我是hooks</h1>
            <p>{state.toLocaleTimeString()}</p>
        </div>
    )
}