React創(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>這是我的第一個(gè)函數(shù)組件！</div>
)
}
const Hello = () => <div>這是我的第一個(gè)函數(shù)組件！</div>
渲染函數(shù)組件：用函數(shù)名作為組件標(biāo)簽名
組件標(biāo)簽可以是單標(biāo)簽也可以是雙標(biāo)簽
//1. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';
/*
函數(shù)組件：
*/
function Hello() {
return (
<div>這是我的第一個(gè)函數(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. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';
/*
函數(shù)組件：
*/
function Hello() {
return (
<div>這是我的第一個(gè)函數(shù)組件！</div>
)
}
//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))
3. 抽離為獨(dú)立JS文件
1. 創(chuàng)建Hello.js
2. 在Hello.js中導(dǎo)入React
3. 創(chuàng)建組件(函數(shù)或類)
4. 在Hello.js中導(dǎo)出該組件
5. 在index.js中導(dǎo)入Hello組件
6. 渲染組件
Hello.js
import React from "react";
//創(chuàng)建組件
class Hello extends React.Component {
render () {
return (
<div>這是我的第一個(gè)抽離到j(luò)s文件中的組件！</div>
)
}
}
//導(dǎo)出組件
export default Hello
index.js
//1. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';
/*
抽離組件到獨(dú)立的JS文件中：
*/
//導(dǎo)入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)文章
這篇文章主要給大家介紹了關(guān)于利用React擼一個(gè)日程組件的相關(guān)資料,包括日常組件的實(shí)現(xiàn)思路、使用的技術(shù)、以及遇到的技術(shù)難點(diǎn)，并給提供了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2021-07-07
React Native驗(yàn)證碼倒計(jì)時(shí)工具類分享
這篇文章主要為大家分享了React Native驗(yàn)證碼倒計(jì)時(shí)工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了對于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
Snake?Game?使用?ReactJS?項(xiàng)目實(shí)現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來收集食物并增長長度,本文給大家詳細(xì)講解了如何使用?React?制作一個(gè)貪吃蛇游戲,需要的朋友可以參考下2023-11-11
react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate
這篇文章主要為大家介紹了react學(xué)習(xí)每天一個(gè)hooks?useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在?React?中使用?Context?API?實(shí)現(xiàn)跨組件通信的方法
在React中,ContextAPI是一個(gè)很有用的特性,可用于組件間的狀態(tài)共享,它允許跨組件傳遞數(shù)據(jù)而無需通過每個(gè)組件手動傳遞props,本文給大家介紹在?React?中如何使用?Context?API?來實(shí)現(xiàn)跨組件的通信,感興趣的朋友一起看看吧2024-09-09
React 組件的重復(fù)渲染是開發(fā)中常見的性能問題之一,尤其是在大型應(yīng)用中,組件的頻繁渲染會導(dǎo)致性能瓶頸,本文將探討 React 組件重復(fù)渲染的常見原因,并提供優(yōu)化策略,幫助開發(fā)者提升應(yīng)用性能,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04