React創(chuàng)建組件的的方式匯總

更新時間：2021年11月08日 10:05:24 作者：wslfw

React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React組件的兩種創(chuàng)建方式,一種是使用函數(shù)創(chuàng)建組件另一種是使用類創(chuàng)建組件，需要的朋友可以參考下

1. 使用函數(shù)創(chuàng)建組件

　　函數(shù)組件：使用JS的函數(shù)(或箭頭函數(shù))創(chuàng)建的組件

　　約定1：函數(shù)名稱必須以大寫字母開頭

　　約定2：函數(shù)組件必須有返回值，表示該組件的結(jié)構(gòu)

　　如果返回值為null，表示不渲染任何內(nèi)容

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

渲染函數(shù)組件：用函數(shù)名作為組件標簽名

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

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

/*
  函數(shù)組件：
*/
function Hello() {
  return (
    <div>這是我的第一個函數(shù)組件！</div>
  )
}

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

2. 使用類創(chuàng)建組件

　　組件類：使用ES6的class創(chuàng)建的組件

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

　　約定2：類組件應(yīng)該繼承React.Component父類，從而可以使用父類中提供的方法或?qū)傩?/p>

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

　　約定4：render()方法必須有返回值，表示該組件的結(jié)構(gòu)

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

/*
  函數(shù)組件：
*/
function Hello() {
  return (
    <div>這是我的第一個函數(shù)組件！</div>
  )
}

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

3. 抽離為獨立JS文件

　　1. 創(chuàng)建Hello.js

　　2. 在Hello.js中導入React

　　3. 創(chuàng)建組件(函數(shù)或類)

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

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

　　6. 渲染組件

Hello.js

import React from "react";

//創(chuàng)建組件
class Hello extends React.Component {
    render () {
        return (
            <div>這是我的第一個抽離到j(luò)s文件中的組件！</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'))

到此這篇關(guān)于React組件的兩種創(chuàng)建方式的文章就介紹到這了,更多相關(guān)React組件創(chuàng)建方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

手把手帶你用React擼一個日程組件
這篇文章主要給大家介紹了關(guān)于利用React擼一個日程組件的相關(guān)資料,包括日常組件的實現(xiàn)思路、使用的技術(shù)、以及遇到的技術(shù)難點，并給提供了詳細的實例代碼,需要的朋友可以參考下
2021-07-07
React Native驗證碼倒計時工具類分享
這篇文章主要為大家分享了React Native驗證碼倒計時工具類，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
React各種狀態(tài)管理器的解讀及使用方法
這篇文章主要介紹了對于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
使用React制作一個貪吃蛇游戲的代碼詳解
Snake?Game?使用?ReactJS?項目實現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來收集食物并增長長度,本文給大家詳細講解了如何使用?React?制作一個貪吃蛇游戲,需要的朋友可以參考下
2023-11-11
react中路由跳轉(zhuǎn)及傳參的實現(xiàn)
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
react學習每天一個hooks?useWhyDidYouUpdate
這篇文章主要為大家介紹了react學習每天一個hooks?useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
在?React?中使用?Context?API?實現(xiàn)跨組件通信的方法
在React中,ContextAPI是一個很有用的特性,可用于組件間的狀態(tài)共享,它允許跨組件傳遞數(shù)據(jù)而無需通過每個組件手動傳遞props,本文給大家介紹在?React?中如何使用?Context?API?來實現(xiàn)跨組件的通信,感興趣的朋友一起看看吧
2024-09-09
React組件重復渲染的成因與解決方法
React 組件的重復渲染是開發(fā)中常見的性能問題之一,尤其是在大型應(yīng)用中,組件的頻繁渲染會導致性能瓶頸,本文將探討 React 組件重復渲染的常見原因,并提供優(yōu)化策略,幫助開發(fā)者提升應(yīng)用性能,需要的朋友可以參考下
2025-03-03
React Store及store持久化的使用教程
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
react獲取input輸入框的值的方法示例
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04