ReactJS入門 - React Component 元件 - 筆記長也NotesHazuya

ReactJS入門 - React Component 元件

2021-06-11 00:01:00   ReactJS

元件的概念

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

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 裡面的內容,修改為:

  <>
    <MyComponent></MyComponent>
  </>

然後執行 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 的使用方式。

 

 
 
 
 

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)