天天看點

React中類元件和函數元件的差別

定義元件

類元件:使用了ES6類的class來定義元件,該類必須繼承React.Component。如果想要通路父元件傳遞過來的參數,可通過this.props的方式去通路。在元件中必須實作render方法,在return中傳回React對象,如下:

React中類元件和函數元件的差別

函數元件:通過函數方式的形式去定義一個React元件,是React中定義元件最簡單的方式,如下:

React中類元件和函數元件的差別

元件傳參

類元件:需要this來引用。

React中類元件和函數元件的差別

函數元件:作為函數參數傳遞。

React中類元件和函數元件的差別

狀态管理

以前,處理state隻能在類元件中進行,在hooks出來之前,函數元件就是無狀态元件,但從React 16.8開始,引入了React Hook useState,允許寫有state的函數元件了。簡單示例:

類元件:this.setState。

React中類元件和函數元件的差別

函數元件:useState。

React中類元件和函數元件的差別

生命周期

在函數元件中并不存在生命周期,所有的生命周期鈎子都來自于繼承的React.Component中,如果用到生命周期,就隻能使用類元件。但是函數元件使用useEffect也能夠替代生命周期的作業。簡單示例:

類元件:

React中類元件和函數元件的差別

函數元件:

React中類元件和函數元件的差別

擷取渲染時的值

類元件:元件本身不存在this,是以props并不會發生改變。

React中類元件和函數元件的差別

函數元件:元件在請求運作時,this.props将會改變,getName方法會從最新的props中的讀取name

React中類元件和函數元件的差別

調用方式

類元件:調用即使執行函數。

React中類元件和函數元件的差別

函數元件:需要将元件執行個體化,然後調用執行個體對象的render方法。

React中類元件和函數元件的差別