Cherry@Webcomm

緣起

目前正在學習 React，由於 React 開發者的社群和一些 libraries 是用 Hook system 做開發，未來 Functional Component 應該會變成 React 開發的主流趨勢，就來談談自己剛開始學習 Hook system 中最大的坑 useEffect。

這篇文章會包含什麼內容

這一次的文章是我在 Udemy 課程中的一個範例專案的學習筆記，中途紀錄了很多我當下不懂或覺得重要的踩點。

這次再回顧整理成較有系統的內容，詳細介紹和解釋 useEffect 的生命週期與坑，做一次完整的學習 review。

1. 在 React 的範圍，這篇文章會盡可能專注在 useEffect 這個主題，因此縱使 Primitive Hooks 還有很多種，接下來的範例也只會使用到 useState 和 useEffect 兩個基本鉤子，架構會很簡單。
2. 本篇文章也不會提到太多 React 的基本技巧或 Class Based Component 的特性，專注在 Functional Component 上。
3. 以上幾點有例外，在我認為某些使用到的概念很重要或會影響到範例實作時，即使它不屬於以上幾點範圍，還是會著墨一下。

先備知識點

1. 撰寫 React class 和 function 元件的經驗
2. 熟悉 React 中使用的 ES6+ 語法
3. 對 React prop 和 state system 有了解
4. 對 React hook system 有基本認識，但可以沒有使用過

目錄

讓我們開始吧！ 💪

Search Widget

接下來創建的這個專案範例，我們將會串接 Wikipedia 的 API，根據搜尋關鍵字（Search term）秀出在維基百科內找到的相關條目內容。

Wireframe

整個頁面的長相大概如下：