反應組件

React Components簡介

組件是一個隔離的接口。例如，在典型的博客主頁中，您可能會找到側邊欄組件和“博客帖子列表”組件。它們又由組件本身組成，因此您可以擁有一個Blog post組件列表，每個組件用於每個Blog帖子，每個組件都有其獨特的屬性。

A react component

React使它非常簡單：一切都是組件。

甚至純HTML標記本身都是組件，並且默認情況下會添加它們。

接下來的兩行是等效的，它們執行相同的操作。與之一JSX，一個沒有，通過注入<h1>Hello World!</h1>到ID為的元素中app。

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成分。更改該方法的第一個參數可讓您創建不同的標籤。第二個參數是道具的對象，在這種情況下，我們不需要任何參數，因此我們通過null。

這就是我們如何使用React來處理內置HTML組件的方法，但是您很快就會將其淘汰。 React擅長的是讓我們通過組成自定義組件來組成UI。

定制組件

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

功能組件：

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

一個類的組成部分：

import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

直到最近，類組件還是定義具有自己狀態的組件的唯一方法，並且可以訪問生命週期方法，因此您可以在首次呈現，更新或刪除組件時執行操作。

React Hooks改變了這一點，因此我們的功能組件現在比以往任何時候都更加強大，並且我相信將來它會成為越來越少的類組件，儘管它仍然是創建組件的完全有效的方式。

還有第三種語法使用ES5沒有類的語法：

import React from 'react'
React.createClass({
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
})

在現代，您很少會看到這種情況，> ES6代碼庫。

免費下載我的反應手冊

反應組件

React Components簡介

定制組件

更多反應教程：