【React 新手村】Hooks

原文發表於 Medium。

又來到React時間，也是我最愛的主題。

Hooks是現代React Developer最容易掛在嘴邊的事物，一個好的Hooks讓前端資料與渲染控制變得方便又容易，但什麼是Hooks？

它是React 16.8版本之後加入的新事物，時間點在2018~19年，在這之前的React壓根沒有Hooks這玩意兒。許多身經百戰的老React寫手都經歷過Class Component的年代，截取一段W3 School 的Class Component示例：

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button type="button" onClick={this.changeColor} >Change color</button>
</div>
);
}
}

是不是看起來有點恐怖？而且Clsss components還有牽涉到元件生命週期的問題，開發者必須利用特定的函式控制元件在各種時期，如啟動渲染、元件移除時的元件內部狀態（例如鼎鼎有名的componentDidMount()、getDerivedStateFromProps()等等），搞得畫面非常不清爽，而且若要重複使用component是有點不方便的。

Hooks應運而生的契機就是來自於此，透過Hooks讓我們有辦法以比較易讀，也比較清爽的方式控制component的狀態，也是因為Hooks的出現，所以催生了目前以function component為主要撰寫方式的React.js。

Hooks的功能

所謂的Hooks指的是一種特殊的Function，其規定名稱是以use開頭（例如useState），它們在React的元件中負責掌控狀態(state)與副作用(side-effect)。

每個網站幾乎都有『狀態』。例如在購物網站中，客戶點擊了某個商品的購買按鍵後之後，常會將商品圖像加入『已購買』字樣。若是在沒有狀態的網頁中，不管客戶怎麼點選，『已購買』字樣都不會出現，因為瀏覽器並不知道哪個商品被點選了，以及需要做些什麼相應改變。Hooks可以掌握並更新頁面上元件的狀態。（例如使用useState這個hooks）

那麼什麼是副作用呢？就是無關畫面渲染（就是產生視覺頁面的過程）的其他必要程序，例如從後端伺服器請求資料。例如購物車網站中各商品的剩餘數量需要即時更新，利用Hooks就可以維持資料的新鮮度。（例如使用useEffect這個hooks）

Hooks的限制

由於Hooks是專為Function component設計的，所以他只能在function component中使用，而且必須在第一層，也就是說他不能在內部的嵌套function中執行。

另外，Hooks通常牽涉到畫面的渲染過程，在多重Hooks的連動影響下，也存在許多初步難以察覺的坑，例如state沒有確實更新，或者引發無限的渲染loop等等，因此需要深入研究，才不至於踩坑。

在後續的文章中，我將介紹各式的Hooks，甚至將示範如何製作出屬於自己的Hooks，敬請期待！