1.1 函數組件與類組件

函數組件與類組件有什么區別？如果你了解React Hooks（后文簡稱Hooks），在這里請拋開Hooks回答這個問題。

本節不討論狀態（state）和生命周期，先看一個函數調用的示例，代碼如下。

getName是一個純函數，不產生任何副作用，執行結束后，它的執行上下文和活動對象會被銷毀，前后兩次調用互不影響。對于不使用任何Hooks的函數組件而言，它也是純函數，那么對于函數組件前后兩次渲染，你能得出與調用getName函數類似的結論嗎？

下面用類組件和函數組件實現相同的功能來對比二者的區別。在瀏覽器上顯示一個按鈕，單擊按鈕調用props中的方法來更新父組件的狀態，隔1s之后打印this.props.count的值。類組件的代碼如下。

函數組件的代碼如下。

FuncCom和ClassCom組件的父級相同，代碼如下。

觀察上述代碼可以發現，傳遞給FuncCom和ClassCom組件的props是一樣的，但在瀏覽器界面中單擊組件的按鈕，開發者工具打印的結果不一樣，FuncCom組件打印的值為0，ClassCom組件打印的值為1。

現在揭曉答案，單擊FuncCom和ClassCom組件中的按鈕都會使父級重新渲染，從而導致FuncCom和ClassCom重新渲染。ClassCom是類組件，重新渲染不會創建新的組件實例，在setTimeout的回調函數中this.props拿到了最新的值。FuncCom是函數組件，重新渲染會創建新的執行環境和活動變量，所以訪問props，無論何時拿到的都是調用FuncCom時傳遞給它的參數，該參數不可變。

FuncCom和ClassCom組件打印出不同的值，原因在于props不可變但類組件實例是可變的，訪問this.props將始終得到類組件最新的props。將ClassCom的this.props賦值給一個變量，在setTimeout的回調函數中用該變量訪問count屬性能讓兩個組件打印出相同的值。