Day6 宣告元件 - Class Component

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 共存。