结论：需要根据state进行渲染时，使用React.Component；用不到state时，可以直接写函数组件。

Function 函数组件：可以接收入参（props），通过return返回dom结构。

function Hello(props) {
    return 
Hello, {props.name}!
;
}
 
ReactDOM.render(
    , 
    document.getElementById('root')
);

React.Component 是一个class（类），不止可以接收props，也支持state，还包含了生命周期函数，在render函数内返回dom结构。

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myname:""
        };
    }

    componentDidMount(){
        this.setState({
            myname:"baby"
        })
    }

    render() {
        return (
            

                
Hello, {this.props.name}!
                
I am {this.state.myname}
            
        );
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

Hook 是React的新特性，通过 useState 和 EffectState 方法，让函数组件也支持了state。

// Hook写法
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

// 对应Class写法
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      

        
You clicked {this.state.count} times
         this.setState({ count: this.state.count + 1 })}>
          Click me
        
      
    );
  }
}