一、前言

昨天我們把 React 的環境架起來，並且執行「Hello World」程式。今天要來學習一下 Hook 的寫法，至於 Hook 是什麼？以及要如何操作它？今天的主要重點就是：「能夠了解怎麼使用 Hook 來開發 React 」，以及用 Hook 練習寫一些範例。

這篇主要是在紀錄我在初學 Hook 時遇到的問題，以及對學習資源的一些感想，提供大家參考。

二、Hook 的入門

2.1 什麼是 Hook？

在學習 Hook 之前，應該會對Component這個關鍵字多少有一點印象（如果你有在查詢 React 相關的文件或是資料時，多少會聽過Component的概念），而Component又可以分成Class Component和Functional Component這兩種寫法（這裡的寫法想成是一種分類方式），至於兩者的差別，可以參考這篇文章與這篇文章【2】後，大概就能知道兩種寫法的不同之處。至於 Hook 是什麼？它是Functional Component的一種寫法。學習 Hook 用途是簡化 Class 的繁雜之處，這讓 Hook 成為了未來的趨勢，雖然勢如破竹的 Hook，也尚未完全取代 Class的寫法，畢竟在一些年長的專案，也能發現 Class 的蹤跡。

2.2 可以直接學 Hook 嗎？

聽前輩的經驗分享【3】，我們知道了： 「在學習 Rreat 時，可以直接學習 Hook」這件事情，等到學完 Hook 之後再去學習 Class 相關寫法，或許是比較好的做法。因為它們是兩種不同概念，在觀念上不要混為一談會比較好。也就是說用 Class 的概念來套用到 Hook 身上，可能會有邏輯上的衝突．．．也就是學習上會有卡卡的感覺。

經過利弊權衡之後，決定文章撰寫方向會採用 Hook 的寫法為主。

2.3 使用 Hook 理由

在這個影片中【4】，有介紹到為什麼要學 Hook ，其中列出了 3 點推你入坑的理由，如下。

1. Class Component 若有共用的資料要進行改動，必須拉出來再包起來，處理上比較麻煩。而 Hook 可以想像是 JavaScript 的 Function 的用法，只要呼叫即可使用。
2. Class 的生命週期像是百慕達三角洲一樣迷幻，生命週期可以想像將一個功能要分別拆成三個部分去管理，你必須要同時修改 3 個地方後，才能算是改動完成，若是少改某個部分，會有 Bug 產生的風險。就如同開頭所說的迷幻三角洲一般，你可能會少改某個部分，甚至找不到要改動的地方，變成了讓你迷失方向的生命週期．．．
3. Hook 不用去管 JavaScript 的this。儘管 this 寫起來就是很方便，但是有時候就是會不清楚 this 所代表的物件為何？但在使用 Hook 則沒有這種問題。

如果對專案架構不太熟悉的朋友，可以看上述影片中 38:35 的介紹，就可以理解基本專案架構的寫法。另外對於剛學 React 的人來說，如果沒有理解 JavaScript ES6 的語法糖，像是箭頭函式、map 等用法，影片後面的內容學起來應該會有點綁手綁腳的。

三、Hook 範例

由於本人還在研究 Hook 的概念（同時也在惡補 JavaScript ES6 語中），寫 Hook 範例的部分就先暫時先放著（?）

或許你也可以起來研究useState【5】的操作方。

四、推薦資源

1. 介紹 Hook
2. React.js - 太弱的我，把 Hooks 點滿就對了
3. 如何在 Codepen 中使用 React

五、結論

在第二章我們建立了 Hook 的概念，以及不小心小小的推坑了一下，誠摯的希望大家，在學 Class 之前，能先學習 Hook 的用法，避免造成邏輯上的混亂。而在第三章沒有找到不錯的例子，只能說一點點就好。

在放假時間寫文章，說實在的，好像有點微微的痛苦，內心總是吶喊著：「好想出去玩啊～～！」，這聲音一直在腦中盤旋，不過今天外面的雨一直飄，也不怎麼想出門，想來想去，還是乖乖地寫文章吧！

六、參考資料

1. [Day 07] Functional Component v.s Class Component
2. Class-based vs Functional Component
3. [Day 01] 沒學過 React 可以從 Hooks 開始嗎？
4. 【前端速成】React 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端
5. [Day 06 - 計數器] 醒醒啊！為什麼一動也不動 - useState 的基本使用