React 入門 3 - Hooks

前面鋪陳Function Components這麼久，終於來到Hooks 耶~~

Hooks出現前，Reacts使用者都是用Class Components，但為了簡化Class Components複雜的寫法和設計，於是React 16.8 以後推出 Hooks!

在正式介紹Hooks的功能之前，我想用這篇來整理Hooks的特色和規則：

1. Hooks 是 React 16.8 以後推出的功能
2. Hooks 只能在Function Component裡面使用，這也是為什麼前面要先介紹 Function Component。
3. Hooks 是一群 use 開頭的功能，例如接下來要入門的 useState、useEffect、useRef 等。
4. 雖然建議新專案或是正在更新的專案使用 Hooks 來寫，但強調 Class Component目前沒有被刪掉的計畫，所以舊專案可以放心繼續使用Class Component。

另外官方也有提到：

不必為了使用Hooks，而硬是把目前的Class Components改成Function Component和Hooks的寫法。

我想是因為，

(1) 雖然 Hooks 整合了一些 Class Components 的生命週期方法，但官方文件提到有部分的生命週期方法還沒在 Hooks 實現；

(2) Hooks是用來簡化寫 Class Components 生命週期方法的思維， 所以改用 Hooks 基本上要拋開過去寫 Class Components 的邏輯。

接下來幾篇會依序介紹Hooks，最後統整兩個使用Hooks的重要規則：

1. 再次強調，Hooks 只能出現在 Function Components 或者 Custom Hook 裡面；
2. Hooks 只能寫在頂層，也就是不能寫在像是條件判斷式(conditions)、迴圈(loop)或是巢狀函式(nested function)裡面；

總之，Hooks只能出現在 Function Components裡面的第一層。

References

• Introducing Hooks @React Docs
• Rules of Hooks @React Docs
• Building Your Own Hooks @React Docs
• 【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端