React構(gòu)建組件的幾種方式及區(qū)別
一、組件是什么
組件就是把圖形、非圖形的各種邏輯均抽象為一個(gè)統(tǒng)一的概念(組件)來實(shí)現(xiàn)開發(fā)的模式
在React
中,一個(gè)類、一個(gè)函數(shù)都可以視為一個(gè)組件
組件所存在的優(yōu)勢(shì):
- 降低整個(gè)系統(tǒng)的耦合度,在保持接口不變的情況下,我們可以替換不同的組件快速完成需求,例如輸入框,可以替換為日歷、時(shí)間、范圍等組件作具體的實(shí)現(xiàn)
- 調(diào)試方便,由于整個(gè)系統(tǒng)是通過組件組合起來的,在出現(xiàn)問題的時(shí)候,可以用排除法直接移除組件,或者根據(jù)報(bào)錯(cuò)的組件快速定位問題,之所以能夠快速定位,是因?yàn)槊總€(gè)組件之間低耦合,職責(zé)單一,所以邏輯會(huì)比分析整個(gè)系統(tǒng)要簡(jiǎn)單
- 提高可維護(hù)性,由于每個(gè)組件的職責(zé)單一,并且組件在系統(tǒng)中是被復(fù)用的,所以對(duì)代碼進(jìn)行優(yōu)化可獲得系統(tǒng)的整體升級(jí)
二、如何構(gòu)建
在React
目前來講,組件的創(chuàng)建主要分成了三種方式:
- 函數(shù)式創(chuàng)建
- 通過 React.createClass 方法創(chuàng)建
- 繼承 React.Component 創(chuàng)建
函數(shù)式創(chuàng)建
在React Hooks
出來之前,函數(shù)式組件可以視為無狀態(tài)組件,只負(fù)責(zé)根據(jù)傳入的props
來展示視圖,不涉及對(duì)state
狀態(tài)的操作
大多數(shù)組件可以寫為無狀態(tài)組件,通過簡(jiǎn)單組合構(gòu)建其他組件
在React
中,通過函數(shù)簡(jiǎn)單創(chuàng)建組件的示例如下:
function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> }
通過 React.createClass 方法創(chuàng)建
React.createClass
是react剛開始推薦的創(chuàng)建組件的方式,目前這種創(chuàng)建方式已經(jīng)不怎么用了
像上述通過函數(shù)式創(chuàng)建的組件的方式,最終會(huì)通過babel
轉(zhuǎn)化成React.createClass
這種形式,
轉(zhuǎn)化成如下:
function HelloComponent(props) /* context */{ return React.createElement( "div", null, "Hello ", props.name ); }
由于上述的編寫方式過于冗雜,目前基本上不使用上
繼承 React.Component 創(chuàng)建
同樣在react hooks
出來之前,有狀態(tài)的組件只能通過繼承React.Component
這種形式進(jìn)行創(chuàng)建
有狀態(tài)的組件也就是組件內(nèi)部存在維護(hù)的數(shù)據(jù),在類創(chuàng)建的方式中通過this.state
進(jìn)行訪問
當(dāng)調(diào)用this.setState
修改組件的狀態(tài)時(shí),組價(jià)會(huì)再次會(huì)調(diào)用render()
方法進(jìn)行重新渲染
通過繼承React.Component
創(chuàng)建一個(gè)時(shí)鐘示例如下:
class Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } tick() { this.setState(state => ({ seconds: state.seconds + 1 })); } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div> Seconds: {this.state.seconds} </div> ); } }
三、區(qū)別
由于React.createClass
創(chuàng)建的方式過于冗雜,并不建議使用
而像函數(shù)式創(chuàng)建和類組件創(chuàng)建的區(qū)別主要在于需要?jiǎng)?chuàng)建的組件是否需要為有狀態(tài)組件:
- 對(duì)于一些無狀態(tài)的組件創(chuàng)建,建議使用函數(shù)式創(chuàng)建的方式
- 由于
react hooks
的出現(xiàn),函數(shù)式組件創(chuàng)建的組件通過使用hooks
方法也能使之成為有狀態(tài)組件,再加上目前推崇函數(shù)式編程,所以這里建議都使用函數(shù)式的方式來創(chuàng)建組件
在考慮組件的選擇原則上,能用無狀態(tài)組件則用無狀態(tài)組件
到此這篇關(guān)于React構(gòu)建組件的幾種方式及區(qū)別的文章就介紹到這了,更多相關(guān)React構(gòu)建組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem
這篇文章主要為大家介紹了字節(jié)封裝React組件手機(jī)號(hào)自動(dòng)校驗(yàn)格式FormItem,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了react創(chuàng)建項(xiàng)目啟動(dòng)報(bào)錯(cuò)的完美解決方法,全稱為Node Package Manager,是隨同NodeJS一起安裝的包管理工具,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10react-navigation之動(dòng)態(tài)修改title的內(nèi)容
這篇文章主要介紹了react-navigation之動(dòng)態(tài)修改title的內(nèi)容,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09詳解三種方式在React中解決綁定this的作用域問題并傳參
這篇文章主要介紹了詳解三種方式在React中解決綁定this的作用域問題并傳參,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08React使用Electron開發(fā)桌面端的詳細(xì)流程步驟
React是一個(gè)流行的JavaScript庫,用于構(gòu)建Web應(yīng)用程序,結(jié)合Electron框架,可以輕松地將React應(yīng)用程序打包為桌面應(yīng)用程序,本文詳細(xì)介紹了使用React和Electron開發(fā)桌面應(yīng)用程序的步驟,需要的朋友可以參考下2023-06-06React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10React避坑指南之useEffect 依賴引用類型問題分析
這篇文章主要介紹了React避坑指南之useEffect 依賴引用類型問題分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03