昨天介紹了 useState 這個在 React 中好用的 function，今天來說說，React Hook 是什麼，那到底還有什麼好用的 Hook呢 ？

關於 Hook

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。
這邊我們來舉個例子來說，在 Hook 出現之前我們要用 React 做出一個計數器，我們可能會這樣做

import React from "react";

class ClassExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count : 0
    }
  }

  render () {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count - 1 })} >-</button>
        <p> {this.state.count} 次</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })} >+</button>
      </div>
    )
  }
}

export { ClassExample }

這樣看起來是不是真的很複雜，接下來讓我們看看 Hook 出現之後，我們是如何輕鬆地做到這件事

import { useState } from "react";

const HookExample = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count - 1)} >-</button>
      <p> {count} 次</p>
      <button onClick={() => setCount(count + 1)} >+</button>
    </div>
  )
}

export { HookExample }

看完上面兩個例子，是不是真的會愛上 React Hook，這項好東西

關於 Hook 的注意事項

Hook 的推出是在 2019 2月，但是 React 卻是在 2013 年推出的，那以前的舊專案就不能使用 Hook 了嗎

在官方文件也有說到這三點

• 完全自由選擇使用。 你可以在幾個 component 中試用 Hook 而不用重寫任何既有的程式碼。不過如果你不想要，並不需要現在學習或使用 Hook。
• 100% 向下相容。 Hook 沒有任何 breaking change。
• 現在即可使用。 隨著 v16.8.0 發佈，現在即可使用 Hook。

所以好 Hook 不用嗎？

Hook 的家族介紹

官方文件中 Hook 分為 基礎 和 額外，但是我認為只要是 Hook 都是好東西

• 基礎的 Hook

  • useState
  • useEffect
  • useContext

• 額外的 Hook

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

（連結出自 React 官方網站 https://reactjs.org/ ）

小結

今天來講 Hook 是什麼，也順道帶出 昨天 useState 是怎麼來的，鐵人賽也過了三分之一，剩下的 20 天，將會持續介紹更多好用的 Hook，以及如何使用 Hook 組合技，來做一些炫砲的事情，謝謝大家