React創建組件的的方式匯總

1. 使用函數創建組件

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

  約定1:函數名稱必須以大寫字母開頭

  約定2:函數組件必須有返回值,表示該組件的結構

  如果返回值為null,表示不渲染任何內容

function Hello() {
    return (
        <div>這是我的第一個函數組件!</div>
    )
}
const Hello = () => <div>這是我的第一個函數組件!</div>

渲染函數組件:用函數名作為組件標簽名

組件標簽可以是單標簽也可以是雙標簽

//1. 導入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函數組件:
*/
function Hello() {
  return (
    <div>這是我的第一個函數組件!</div>
  )
}

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

2. 使用類創建組件

  組件類:使用ES6的class創建的組件

  約定1:類名稱也必須以大寫字母開頭

  約定2:類組件應該繼承React.Component父類,從而可以使用父類中提供的方法或屬性

  約定3:類組件必須提供render()方法

  約定4:render()方法必須有返回值,表示該組件的結構

//1. 導入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函數組件:
*/
function Hello() {
  return (
    <div>這是我的第一個函數組件!</div>
  )
}

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

3. 抽離為獨立JS文件

  1. 創建Hello.js

  2. 在Hello.js中導入React

  3. 創建組件(函數或類)

  4. 在Hello.js中導出該組件

  5. 在index.js中導入Hello組件

  6. 渲染組件

Hello.js

import React from "react";

//創建組件
class Hello extends React.Component {
    render () {
        return (
            <div>這是我的第一個抽離到js文件中的組件!</div>
        )
    }
}

//導出組件
export default Hello

index.js

//1. 導入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  抽離組件到獨立的JS文件中:
*/

//導入Hello組件
import Hello from './Hello';

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

到此這篇關於React組件的兩種創建方式的文章就介紹到這瞭,更多相關React組件創建方式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: