ReactJS入門－ React Component 元件

碼農思考中 / Ted

6 min readSep 1, 2023

元件的概念

在製作網頁的時候，會有一些部分被重複利用，例如常見的導航欄。為了能不必重複篩寫程式碼，因此出現了元件的概念，將網頁切成數個元件，就能不必重複篩寫且更易於管理。至於如何切出不同的元件，也是需要視專案的需要來切，這邊就不多做討論了。

Class Component

如標題，這種方式是以 class 物件的方式來建立元件，這種方式是非常標準的物件導向程式設計方式。

建立

React 不像 Angular 有命令列工具可以使用，也並沒有規範要如何建立目錄。為了能簡單展示範例，接下來所有建立的文件都是在專案的 src 目錄下。

MyComponent.js

請在 src 下建立一個 MyComponent.js，並篩寫以下程式碼：

import React, { Component } from 'react'; 
class MyComponent extends Component{ 
} 
export default MyComponent;

import 部分，需要引入 React 以及 Component 才能讓 React 認得這個元件。而當中定義的類別必須繼承 Component 這個類別，並記得將類別輸出才能讓其他檔案使用。

關於元件的命名規則，為使其能與 html 原本的 Tag 分別，所以必須要以大寫開頭，並和類別名稱相同。

render()

之後，我們在剛建立好的元件中，加入 render() 這個成員函數，變成這樣：

import React, { Component } from 'react'; 
class MyComponent extends Component{ 
  render(){ 
    return( <div> hello,World </div> ); 
  } 
} 
export default MyComponent;

render 這個函數會把 return 裡面的元素渲染到畫面上去。

修改 index.js

打開 index.js，在最上面先 import 剛剛建立的元件：

import MyComponent from './MyComponent.js'

然後修改 ReactDOM.render 裡面的內容，修改為：

然後執行 npm start 之後，就可以看到 hello,world 顯示在頁面上面。

宣告 class 成員變數

成員變數會直接藉由建構子來宣告，由於我們繼承了其他的類別，所以記得要先加上 super() ，然後再加上 this 關鍵字，如下：

constructor(){ super(); this.count = 100; }

super()：由於我們繼承了 Component 這個父類別，所以必須要先執行 Component 的建構子才能使用 this 關鍵字，而 super() 就是參照父類別的建構子。

然後再將 render return 改成

<div> helloWorld <br/> { this.count } </div>

加上之後，執行就能看到網頁上印出 count 的值 100。

宣告 class 成員函數

在 ES6 當中，宣告成員函數後都必須要在建構子中以 this.函式名稱 = this.函式名稱.bind(this)來將成員函數綁定到類別上，因為預設宣告的函數會被綁到 undefined。

先宣告一個 changeCount 的成員函數

changeCount(){ this.count += 1; console.log(this.count); }

並在建構子新增這一行來綁定函式

this.changeCount = this.changeCount.bind(this);

再把 render 裡 return 的內容改成

<div> helloWorld <br/> { this.count }
 <button onClick={ this.changeCount }>++</button> 
</div>

執行之後，可以看到按了按鈕之後，雖然 this.changeCount 有改變，但是畫面並沒有更新，之後的篇章我們就會提到如何更新畫面。

這邊先快速提到，在 React 當中，畫面會被重新渲染有兩個條件：1. props 發生改變 2. state 發生改變。而我們前面宣幾的成員變數不是 props 也不是 state，所以畫面不會更新。props 以及 state 之後的篇章都會介紹。

Functional Component

過往在 React 大多數以 class 來建立元件，是因為以函式建立的元件不能擁有自己的 state，所以只能做單純的畫面渲染。但在 React Hook 出來之後就不一樣了，之後我們也會介紹幾個 React Hook。

以 functional component 改寫 MyComponent

再建立一個 MyComponentFun 的新元件，篩寫這樣的程式碼：

import React, { Component } from 'react'; 
const MyComponentFun = ()=>{
 } 
export default MyComponentFun;

跟 class component 最大的差異就是以 function 宣告這個元件，其他在 import 以及 export 基本上是一樣的。

然後，在 function 裡面篩寫這些內容：

let count = 100; const changeCount = ()=>{ count += 1; console.log(count); } return( <div> helloWorld <br/> { count } <button onClick={ changeCount }>++</button> </div> );

由於不是物件，所以沒有建構子也沒有成員變數，自然也不用 this 與 super 囉！而 return 直接包住要回傳的元素即可，不用呼叫 render() 。

如果要測試一下效果，記得在index.js 中 import 剛剛建立的元件，並修改一下ReactDOM.render 的部分：

//import import MyComponentFun from './MyComponentFun.js' //... // render 部分 <> <MyComponentFun></MyComponentFun> </>

functional component 基本上沒有太多解說的部分，因為比起 class component ，functional component 簡潔也比較不必顧慮太多ES6 對於類別的規範，非常好上手。從上面的程式碼也能看得出來後者更為簡潔。

結論

本篇文章介紹了兩種元件的建立方式，我個人偏好於 function 的方式建立元件，簡單明瞭。但是 class 的方式建立是最符合物件導向設計的方式，可以用有元件本身自己的函式以及變數。要使用哪一種方式，還是需要看個人習慣以及專案的需求。

下一篇會介紹 props 的使用方式。

Originally published at https://studio-44s.tw.

ReactJS入門 － React Component 元件