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