反應組件

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代碼庫。

免費下載我的反應手冊


更多反應教程: