React中有兩種元件：函式元件（Functional Components) 和類元件（Class Components）

函式元件

import React from "react";
import Button from "./Button";
let Message =(props)=> { 
    return (
        <div>
            <p className="tilte">message</p>
            <Button color={props.color}>Delete</Button>
        </div>
    );
}
export default Message;
 

類元件

import React, { Component } from "react";
import Button from "./Button";
class Message extends Component {
    render() {
        console.log(this);
        return (
            <div>
                <p className="tilte">message</p>w
                <Button color={this.props.color}>Delete</Button>
            </div>
        );
    }
}
export default Message;
 

優缺點

1、函式元件看似只是一個返回值是DOM結構的函式，其實它的背後是無狀態元件（Stateless Components）的思想。函式元件中，你無法使用State，也無法使用元件的生命週期方法，這就決定了函式元件都是展示性元件（Presentational Components），接收Props，渲染DOM，而不關注其他邏輯。

2、函式元件中沒有this。所以你再也不需要考慮this帶來的煩惱。而在類元件中，你依然要記得繫結this這個瑣碎的事情。

3、函式元件更容易理解。當你看到一個函式元件時，你就知道它的功能只是接收屬性，渲染頁面，它不執行與UI無關的邏輯處理，它只是一個純函式。而不用在意它返回的DOM結構有多複雜。