React函數(shù)組件和類組件的區(qū)別及說(shuō)明
更新時(shí)間：2022年08月08日 09:24:21 作者：前端精髓
這篇文章主要介紹了React函數(shù)組件和類組件的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
React函數(shù)組件和類組件區(qū)別
定義組件有兩個(gè)要求：
- 組件名稱必須以大寫字母開頭
- 組件的返回值只能有一個(gè)根元素
函數(shù)組件
function Welcome (props) {
? return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));函數(shù)組件接收一個(gè)單一的 props 對(duì)象并返回了一個(gè)React元素
類組件
class Welcome extends React.Component {
? render() {
? ? return (
? ? ? <h1>Welcome { this.props.name }</h1>
? ? );
? }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));- 無(wú)論是使用函數(shù)或是類來(lái)聲明一個(gè)組件，它決不能修改它自己的 props。
- 所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
- React是單項(xiàng)數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會(huì)更新。
- 屬性 props 是外界傳遞過(guò)來(lái)的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改
- 組件的屬性和狀態(tài)改變都會(huì)更新視圖。
區(qū)別
函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
| 區(qū)別 | 函數(shù)組件 | 類組件 |
|---|---|---|
| 是否有 this | 沒有 | 有 |
| 是否有生命周期 | 沒有 | 有 |
| 是否有狀態(tài) state | 沒有 | 有 |
React函數(shù)式組件和類組件的優(yōu)缺點(diǎn)
1.類組件的性能消耗比較大
因?yàn)轭惤M件需要?jiǎng)?chuàng)建類組件的實(shí)例，而且不能銷毀。
2.函數(shù)式組件性能消耗小
因?yàn)楹瘮?shù)式組件不需要?jiǎng)?chuàng)建實(shí)例，渲染的時(shí)候就執(zhí)行一下，得到返回的react元素后就直接把中間量全部都銷毀。
函數(shù)式組件是不能有狀態(tài)的，但是現(xiàn)在有了react hooks，也可能有狀態(tài)了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在V6版本中，<Switch>組件被替換成<Routes>組件，同時(shí)，component屬性被element屬性替換，這篇文章主要介紹了react-router?v6新特性總結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了react-router-dom5如何升級(jí)到6問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React SSR服務(wù)端渲染的實(shí)現(xiàn)示例
本文主要介紹了實(shí)現(xiàn)React服務(wù)端渲染,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析
這篇文章主要介紹了在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析,有時(shí)使用了某個(gè)React Native 第三方庫(kù)，可是它有些問(wèn)題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會(huì)意外丟失修改結(jié)果的方法，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
如何在 React 中調(diào)用多個(gè) onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個(gè)onClick函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁(yè)面見進(jìn)行切換，下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法，文中通過(guò)圖文介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
useState 通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部 state，React 會(huì)在重復(fù)渲染時(shí)保留這個(gè) state，接下來(lái)通過(guò)一個(gè)示例來(lái)看看怎么使用 useState吧2021-06-06
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn)
這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn),需要的朋友可以參考下2017-04-04