Class Component用的是ES6中的class語法建立元件，接著去 extends(繼承)React.component中定義的內容。

被定義的內容渲染前需使用render()呼叫，render()會檢查元件狀態中的變化，根據變化回傳不同的類別型態。

關於render()回傳的類別，請參考React官方參考指南:
https://zh-hant.reactjs.org/docs/react-component.html#render

Class Component有以下特點：

• 有自己的元件狀態（state）。
• 有元件週期（Lifecycle），可在不同的生命週期階段去執行動作。
• 有this，可使用this.state去變更元件狀態。
• props傳遞方式需使用this.porps。

我們將App.js裡面的Functional Component寫法改為Class的寫法

import React from 'react';
import logo from './logo.svg';
import './App.css';

class Test extends React.Component {
  render() {
    return <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Class component
      </a>
    </header>
  </div>
  }
}

export default Test;

成功顯示在畫面上了！

結論

Class Component原本的優勢是可以使用元件自己狀態和生命週期，但是自從React推出了React Hooks後，Functional Component也可以利用Hook處理元件狀態和生命週期。

Functional Component使用不用將class轉換成ES5，程式碼行數較少、在編譯上更快速，搭配Hooks後，這種宣告寫法逐漸成為主流，不過目前很多公司專案中仍然在使用Class component，React會繼續支援Class component，讓Hook在新程式碼中跟 class 共存。