隨著hooks的流行,class組件基本已經(jīng)銷聲匿跡,甚至于面試時候問及class組件和function組件的區(qū)別的次數(shù)都逐漸降低,但是深入的了解兩者的區(qū)別,還是很有必要的.

為什么React要從class組件轉向function組件

1. 在組件之間復用狀態(tài)邏輯很難,而hooks能夠實現(xiàn)粒度更細的狀態(tài)復用,理解的更簡單一點,其實就是可以將state抽離出來,所以才能實現(xiàn)狀態(tài)邏輯的復用.

2. 復雜組件變得難以理解,其實也是狀態(tài)邏輯、粒度的問題.

3. 難以理解的class,這點其實還好,而且隨著class的各種提案的興起,class在某些場景下還是有很大的優(yōu)勢.

class組件和function組件的區(qū)別

1. class和function的區(qū)別. class和function本身就存在著顯著區(qū)別.class本身可以抽象、繼承,所以我們在使用class組件時,可以直接繼承PureComponent,實現(xiàn)shouldComponentUpdate，對props進行淺層比較,優(yōu)化渲染.class有靜態(tài)屬性,function組件中使用防抖、節(jié)流要用到useRef等手段,class中并不需要.class可以使用裝飾器.等等.

2. 在React運行時二者的區(qū)別.class組件需要實例化,調(diào)用render屬性獲取子節(jié)點.function組件在每次更新中都會重新執(zhí)行一遍,才能夠獲取到return出來的子節(jié)點.所以function組件中如果要使用state,或者要實現(xiàn)類似class組件中的靜態(tài)屬性等功能,就必須使用useState、useRef,將狀態(tài)、屬性等保存到function之外,也就是fiber、element上去.

我們可以簡單的通過一個搜索功能的實現(xiàn),來觀察二者的區(qū)別.我們需要實現(xiàn)的功能,類似于百度等搜索引擎的輸入框,在輸入停止3秒后,根據(jù)輸入內(nèi)容,獲取相關提示內(nèi)容

先寫一個簡單的debounce函數(shù)

在class組件中使用它,input是一個受控組件,onChange之后,改變state,頁面得到更新,輸入框值得到改變,3秒后展示了關鍵字,運行正常

我們使用function組件來實現(xiàn)這個功能

我們會發(fā)現(xiàn)debounce并沒有起作用,因為每一次的setValue都會觸發(fā)更新,然后function組件整個執(zhí)行一遍,都是一個snapshot,每一次的觸發(fā)的onChange函數(shù)都是重新創(chuàng)建的,onChange中調(diào)用的search函數(shù),也是重新創(chuàng)建的,每一次函數(shù)的執(zhí)行都是一次快照,就像我們拍照一樣,就算兩次拍照姿勢一模一樣,但是上一次的你和下一次的你已經(jīng)不是同一個你了.因此debounce功能肯定會失效.這個時候就需要我們使用useRef、useCallback、useMemo等方法將不需要每次都更新的函數(shù)保存起來,確保我們每次調(diào)用的都是同一個函數(shù),這也是function組件常用的優(yōu)化方法,但是同樣會帶來一些心智負擔.

useCallback的第二參數(shù)類似于useEffect的第二個參數(shù),只有在依賴項改變時才會更新,確保我們search每次指向的均是同一個函數(shù),所以我們的debounce運行變正常.

hooks確實解決了它React想要解決的問題,但是沒有銀彈,class也并非一無是處,某些領域,class似乎更具想象力.