React中的函數式組件和類組件

0.背景

React中有兩種創建組件的方式

• 使用函數創建組件
• 使用類創建組件

1.函數式組件

使用JS的函數(/箭頭函數)創建的組件

1.1 說明

• 函數名稱必須以大寫開頭(據此區分是組件還是普通的標簽元素)

• 函數組件必須有返回值,表示該組件的結構.

  不渲染任何內容時,請返回null.

• 使用函數名稱作為組件名

1.2 示例

// 函數式組件
function Hello(){
    return (
    	<div>這是函數式組件</div>
    )
}
// 或者 箭頭函數
// const Hello = () => <div>這是函數式組件</div>

// 掛載渲染區域
ReactDOM.render(<Hello />, document.getElementsById('root'))

2.類組件

使用ES6的class創建組件

2.1 說明

• 類名稱必須以大寫字母開頭
• 類組件需要繼承React.Component類(從而使用該父類中的方法或屬性).
• 類組件必須提供render()方法
• render()方法必須有返回值,表示該組件的結構.

2.2 示例

// 類組件
class Hello extends React.Component{
    render() {
        // 不渲染內容時,同樣返回null即可.
        return <div>這是類組件</div>
    }
}
// 掛載渲染區域
ReactDOM.render(<Hello />, document.getElementsById('root'))

3. 將組件獨立為js文件

3.1 類組件導出

創建Hello.js

import React from 'react'

// 創建組件
class Hello extends React.Component{
    render() {
        // 不渲染內容時,同樣返回null即可.
        return <div>這是類組件</div>
    }
}

// 導出組件
export default Hello

導入

// 指定路徑
import Hello from './Hello'

// 掛載渲染區域
ReactDOM.render(<Hello />, document.getElementsById('root'))

3.2 函數組件導出

創建Demo.js

function Demo() {
  return (
     return <div>這是函數組件</div>
  )
}

export {Demo}

導入

import {Demo} from './Demo'

// 掛載渲染區域
ReactDOM.render(<Demo />, document.getElementsById('root'))