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▼

    Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。也就是說在React 16.8之后函數組件就可以使用state以及其他的react特性。具體學習hook請前往https://react.docschina.org/docs/hooks-intro.html

有了hook之后函數組件式編程使react項目性能更優，代碼更加簡潔。如下demo：