iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

看初心者怎麼學React系列 第 6

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;

成功顯示在畫面上了!
https://ithelp.ithome.com.tw/upload/images/20210921/20140303XnC2YcEvCu.png

結論

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

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


上一篇
Day5 宣告元件 - Functional Component
下一篇
Day7 什麼是JSX?
系列文
看初心者怎麼學React30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言