今天總算進入到了 React.js 中大名鼎鼎的 React Hooks 這個章節了！

這樣講可能很浮誇，但是當初在選擇框架學習時我就已經在搜尋引擎當中看到非常多 React Hooks 的介紹了。當時只會寫原生 JavaScript 的我看得似懂非懂，但是你可以在眾多文章裡面看見前輩們對它是各種的讚譽不絕，甚至還有人表示對 React Hooks 一見鍾情的都大有人在。

所以現在你可以想像 React Hooks 的出現對 React.js 的開發者來說是一件多麽美好的事了嗎？那我們就趕快開始吧！

React Hooks

在 Function Component 中實現操作元件的 State 和各種生命週期方法的功能。

在 2019 年， React.js 發佈了 V16.8 的版本並宣布加入了新功能 React Hooks ，從此 Function Component 的命運就大大翻轉了。

大家還記得我們在 Class Component 的章節中有介紹過 React.js 兩種元件類型之間最主要的差別為何嗎？沒錯，就是針對元件的 State 以及生命週期等方法都是只能應用在 Class Component 裡的。但是， React Hooks 的出現讓我們能夠將這些我們原本在元件內常用的功能也應用在 Function Component 中。

所以簡而言之， React Hooks 的出現讓 Function Component 也開始可以擁有自己的 State 和生命週期了！不只如此， Function Component 原本的撰寫方式就比較接近 JavaScript 的 Function ，所以能夠讓元件看起來更加簡潔和明瞭。因此這項新功能的加入簡直是讓 Function Component 的聲勢在 React.js 開發者當中水漲船高！

備註：如果對於 Class Component 和 Function Component 的概念不清楚的話，可以參考前幾篇的介紹喔！附上傳送門給大家！

為什麼有 React Hooks 的出現？

由於我在撰寫這系列文之前真的完全沒有碰過 React.js ，所以由我分享心得好像不是那麼合適。因此我從官方文件和前輩的眾多好文當中來跟大家說明一些初學者也能理解 React Hooks 誕生的原因：

1. Class Component 越寫越龐大，越寫越複雜

隨著我們開發的專案大小跟需要的新功能逐漸增加，你撰寫的元件只會越來越多。而且如果元件需要處理資料和功能的話勢必得使用唯一可以操作 State 和相關的生命週期的 Class Component 來做撰寫，像是在 componentDidMount() 中如果綁定監聽事件的話要記得在 componentWillUnmount() 中解除綁定的監聽。這樣就會像官方文件中所提到的狀況，你會在一個元件內撰寫許多不相關的邏輯在同個 Function 內，各種功能全部都混合在一起。

因此， React Hooks 打造了不同的 Functions 讓你能夠將相同的邏輯和功能彙整在一起，而不再是使用生命週期所提供的方法來分開撰寫了。

2. Class 語法的門檻

之前的篇幅有提過，以往要使用 State 和生命週期都是要使用 Class Component，而 Class Component 是採用 JavaScript ES6 的 Class 語法糖所撰寫的。所以你會需要先對 ES6 的 Class 結構有一定的基礎和了解，因為它必須要使用 extends 來繼承 React.js 所定義的 Component 物件才能做使用。

另外你也因此需要在 Class Component 中大量的使用 this 指向到該元件的實體來做其他操作，不過 this 在 JavaScript 中一直都是一個比較難以一時半刻理解的概念，所以這也是為什麼官方文件中提到說他們發現 Class 對於學習 React.js 的初學者是一大障礙的原因。

這點我個人算是蠻有共鳴的！因為我在剛開始看 React.js 的文件和搜索資料看到元件的時候，也花了一點時間回去複習 ES6 的 Class 語法糖。但是看到 Function Component 的時候卻覺得非常熟悉，因為它就是 JavaScript 的 Function 。

今天先讓大家對 React Hooks 有一個基本的概念，明天就要進入到第一個 React Hooks ： useState 了！
如果有任何問題都非常非常歡迎提出和指教唷～
那我們下篇見ʘ‿ʘ