React函數組件和class組件以及Hooks
作者 煩惱會解決煩惱
我們都知道定義組件有兩個要求：
-
組件名稱必須以大寫字母開頭
-
組件的返回值只能有一個根元素
什麼是函數組件▼
函數組件接收一個單一的 props 對象並返回了一個React元素，如下圖：
什麼是class組件▼
使用ES6 的 class 來定義的組件。如下圖：
函數組件和class組件的區別▼
有一段時間，規範的答案是: class組件可以訪問更多功能（如狀態）。有了Hook，就不再是這樣了。
函數組件的性能比類組件的性能要高，因爲類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。爲了提高性能，儘量使用函數組件。
什麼是Hook▼
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。也就是說在React 16.8之後函數組件就可以使用state以及其他的react特性。具體學習hook請前往https://react.docschina.org/docs/hooks-intro.html
有了hook之後函數組件式編程使react項目性能更優，代碼更加簡潔。
React函數組件和class組件以及Hooks
作者 煩惱會解決煩惱
我們都知道定義組件有兩個要求：
-
組件名稱必須以大寫字母開頭
-
組件的返回值只能有一個根元素
什麼是函數組件▼
函數組件接收一個單一的 props 對象並返回了一個React元素，如下圖：
什麼是class組件▼
使用ES6 的 class 來定義的組件。如下圖：
函數組件和class組件的區別▼
有一段時間，規範的答案是: class組件可以訪問更多功能（如狀態）。有了Hook，就不再是這樣了。
函數組件的性能比類組件的性能要高，因爲類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。爲了提高性能，儘量使用函數組件。
什麼是Hook▼
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。也就是說在React 16.8之後函數組件就可以使用state以及其他的react特性。具體學習hook請前往https://react.docschina.org/docs/hooks-intro.html
有了hook之後函數組件式編程使react項目性能更優，代碼更加簡潔。如下demo：
長按二維碼關注
ID:極致簡文
