/

React元件

React元件

React元件簡介

元件是介面中的一個獨立單元。例如，在典型的部落格首頁中，可以找到側邊欄元件和部落格文章清單元件。它們本身由其他元件組成，因此您可以擁有一個部落格文章元件的清單，每個部落格文章都有自己的特殊屬性。

一個React元件

React讓這個過程非常簡單：所有東西都是元件。

甚至普通的HTML標籤本身都是一個元件，並且它們是默認添加的。

下面的兩行程式碼是等價的，它們做的是相同的事情。一個使用JSX，一個不使用，將<h1>Hello World!</h1>嵌入到ID為app的元素中。

1
2
3
4
5
6
7
8
9
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('app'))

ReactDOM.render(
 React.createElement('h1', null, 'Hello World!'),
 document.getElementById('app')
)

可以看到，React.createElement提供了一個API來創建h1元件。改變該方法的第一個參數可以創建不同的標籤。第二個參數是屬性(prop)的物件，在這種情況下，我們不需要任何屬性，所以我們傳遞null。

這是我們如何使用React與內建的HTML元件一起工作，但您很快就會不再滿足它們。React擅長的是讓我們通過組合自定義元件來構建使用者介面。

自定義元件

在React中，有兩種定義元件的方法。

一種是函數元件：

1
2
3
4
5
6
7
8
const BlogPostExcerpt = () => {
 return (
 <div>
 <h1>標題</h1>
 <p>描述</p>
 </div>
 )
}

另一種是類別元件：

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
 render() {
 return (
 <div>
 <h1>標題</h1>
 <p>描述</p>
 </div>
 )
 }
}

直到最近，類別元件是定義具有自己狀態並且可以存取生命週期方法的元件的唯一方式。

React Hooks改變了這一點，所以現在我們的函數元件比以往更強大，我相信我們在未來會看到越來越少的類別元件，儘管以這種方式創建元件仍然是完全有效的方式。

還有第三種語法，使用ES5語法而不使用類別：

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'

React.createClass({
 render() {
 return (
 <div>
 <h1>標題</h1>
 <p>描述</p>
 </div>
 )
 }
})

在現代的> ES6程式碼庫中，您很少會見到這種語法。