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ù)組件和類組件當然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結果即可。為了提高性能，盡量使用函數(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如何不使用eject修改create-react-app的配置
許多剛開始接觸create-react-app框架的同學，不免都會有個疑問：如何在不執(zhí)行eject操作的同時，修改create-react-app的配置。2021-04-04
這篇文章主要介紹了前端常見react面試題合集,介紹了React?Fiber的簡介及fetch封裝代碼，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
在React中,可以使用多種方法進行路由跳轉(zhuǎn),本文主要介紹了React路由跳轉(zhuǎn)的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家介紹了React Router V6更新內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
React Native 集成 ArcGIS 地圖的詳細過程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細過程,感興趣的朋友跟隨小編一起看看吧2024-06-06
本文主要介紹了React Native Popup實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
react+typescript中使用echarts的實現(xiàn)步驟
本文主要介紹了react+typescript中使用echarts的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
“Props” 是 React 中用于傳遞數(shù)據(jù)給組件的一種機制,通常作為組件的參數(shù)進行傳遞,在 React 中,props 是只讀的,意味著一旦將數(shù)據(jù)傳遞給組件的 props,組件就不能直接修改這些 props 的值,這篇文章主要介紹了React的Props、生命周期,需要的朋友可以參考下2024-06-06
在React中使用React.createRef：更優(yōu)雅的DOM引用方式
React提供了多種方式來引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應用,以及它為開發(fā)者帶來的便利,感興趣的朋友一起看看吧2024-01-01
在項目開發(fā)過程中,對于復雜的業(yè)務選擇功能很常見,下面這篇文章主要給大家介紹了關于React創(chuàng)建對話框組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05