# React.js Hook 入門 - 1. Hook簡介
###### tags: `React` `Hook` `TypeScript`

### 簡介
> Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hook 是 React 在 16.8 版所釋出的新功能。在官網的文件中，官方在最一開頭的段落介紹 Hook 時，給了一個簡單明瞭的說明，『 不必寫 class 就能使用 state 以及其他 React 的功能 』。這聽起來非常的很吸引人！對於已經很熟悉 React 的人，多了新的工具，可以用更簡潔的程式碼來達成相同的目的。對於初學的人，可以更快地上手 React，降低了一開始的學習曲線。

### 特點
Hook 有幾個重要的特點
1. Completely opt-in.（完全自由選擇使用）
可以自由的在 component 中使用 Hook 而不用重寫任何既有的程式碼
2. 100% backwards-compatible.（100% 向下相容）
Hook 沒有任何 breaking change。
3. Available now.（現在即可使用）
在 v16.8.0 的版本發佈之後，皆已可使用 Hook。

在釋出 Hook 之後，官方也同時作出了以下聲明
1. There are no plans to remove classes from React.(目前沒有計畫要從 React 移除 class）
2. Hooks don’t replace your knowledge of React concepts.（Hook 不會取代你對 React 概念的了解）

### Hook 分類
* 基礎的 Hook
1. useState
2. useEffect
3. useContext
* 額外的 Hook
1. useReducer
2. useCallback
3. useMemo
4. useRef
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

之後的文章就會依照這個順序介紹，至於進階的使用方法或是額外的補充可能會視情況做調整。

##### Reference
[Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)