定義元件
類元件:使用了ES6類的class來定義元件,該類必須繼承React.Component。如果想要通路父元件傳遞過來的參數,可通過this.props的方式去通路。在元件中必須實作render方法,在return中傳回React對象,如下:
函數元件:通過函數方式的形式去定義一個React元件,是React中定義元件最簡單的方式,如下:
元件傳參
類元件:需要this來引用。
函數元件:作為函數參數傳遞。
狀态管理
以前,處理state隻能在類元件中進行,在hooks出來之前,函數元件就是無狀态元件,但從React 16.8開始,引入了React Hook useState,允許寫有state的函數元件了。簡單示例:
類元件:this.setState。
函數元件:useState。
生命周期
在函數元件中并不存在生命周期,所有的生命周期鈎子都來自于繼承的React.Component中,如果用到生命周期,就隻能使用類元件。但是函數元件使用useEffect也能夠替代生命周期的作業。簡單示例:
類元件:
函數元件:
擷取渲染時的值
類元件:元件本身不存在this,是以props并不會發生改變。
函數元件:元件在請求運作時,this.props将會改變,getName方法會從最新的props中的讀取name
調用方式
類元件:調用即使執行函數。
函數元件:需要将元件執行個體化,然後調用執行個體對象的render方法。