React函數元件和class元件以及Hook

我們都知道定義元件有兩個要求：

1. 元件名稱必須以大寫字母開頭
2. 元件的傳回值隻能有一個根元素

什麼是函數元件▼

    函數元件接收一個單一的 ​

​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

作者 煩惱會解決煩惱

我們都知道定義元件有兩個要求：

1. 元件名稱必須以大寫字母開頭
2. 元件的傳回值隻能有一個根元素

什麼是函數元件▼

    函數元件接收一個單一的 ​

​props​

​ 對象并傳回了一個React元素，如下圖：

什麼是class元件▼

     使用ES6 的 class 來定義的元件。如下圖：

函數元件和class元件的差別▼

    有一段時間，規範的答案是: class元件可以通路更多功能（如狀态）。有了Hook，就不再是這樣了。

    函數元件的性能比類元件的性能要高，因為類元件使用的時候要執行個體化，而函數元件直接執行函數取傳回結果即可。為了提高性能，盡量使用函數元件。

什麼是Hook▼