元件(Component)

前面的文章裡面，有提到 元件 這個詞，也就是所謂的 Component，元件在 React 中是最基本也是最重要的單元，今天就更加深入了解一下。

這邊新增一個 TextShow.js 檔案，把昨天TextInput裡的顯示文字的部分，單獨抽離出來做成一個元件，要注意的是元件開頭第一個字母一定要大寫，不然會出錯。

一般 React 元件撰寫有主要兩種方式：

Class元件

import React, {Component} from 'react'

// 注意元件開頭第一個字母都要大寫
class TextShow extends React.Component {
    // render()是Class元件必須的
    render() {

        return <h1>{this.props.text}</h1>
        
      }
}
// 匯出TextShow模組
export default TextShow

• Class元件不能沒有render()，是唯一必要的方法

Functional元件

import React from 'react'

// 注意元件開頭第一個字母都要大寫
const TextShow = (props) => (
    <h1>{props.text}</h1>
)

// 匯出TextShow模組
export default TextShow

• 沒有自己內部狀態的元件可以使用 Functional元件的方式，這樣可以獲得比較好的效能。

屬性(Props)

TextShow元件裡的最後部分

<h1>{this.props.text}</h1>

前面文章也有提到過這是JSX語法，是一種可以讓HTML標記直接寫在JavaScript程式碼中的擴充語法，大括號{}裡面就是JavaScript的程式碼。

在React元件中使用Props傳遞數值，是可以自定義變數傳入元件中的 {this.props.參數名稱}，這邊定義TextShow為外部元件然後在父元件TextInput中去調用它並動態給值(後面會說明)。

Functional元件這邊 props 是傳入function的參數，因此取用 props 不用加 this。

• 元件不能改變自己的props，只有它的父元件可以做這件事。

今天這些就是一個簡單的元件(Component)的組成。