Hooks用法

在React中，Hooks（例如useState、useEffect、useContext等）的使用有一些規則，其中一條就是在React函式組件的最上層使用Hooks。這是因為Hooks的設計是基於React的渲染階段（render phase）和更新階段（commit phase）的生命週期。

當React渲染一個組件時，它會記錄哪些Hooks被使用，並在下一次渲染時確保它們被以相同的順序呼叫。這樣的順序是由Hooks的調用順序所決定的。如果在條件式、迴圈或嵌套函式內使用Hooks，React就無法確保Hooks的調用順序，這可能導致不一致的狀態和效果。

讓我們來看一個例子，假設你在一個條件式中使用了useState：

React不知道useState是否應該在每次渲染中保留相同的count狀態，因為它可能在條件滿足時被創建，而在下一次渲染時又被忽略。這樣的行為可能導致錯誤且難以追蹤。

為了避免這樣的問題，React要求Hooks必須在組件的最頂層使用，確保它們在每次渲染中都以相同的順序被調用。如果有條件性地使用Hooks，可以透過條件式外提Hooks，或使用useEffect等方法來達到相同的效果。