前言

這篇文章將會介紹 React Hooks，Hook 是 React 16.8 中增加的新功能。它讓我們不必寫 class Component 就能使用 state 以及其他 React 的功能。
下半部會列出本人目前在實際專案時，公司所提出的需求，哪針對這個需求，又是如何使用哪些 Hooks，來協助我們解決這些需求。

useState - 元件狀態管理

useState：使 Functional Component 能夠使用 state。
基本結構用法：const [state, setState] = useState(initialState)

1. state 為我們要設置的狀態。
2. setState 為更新 state 的方法，命名依照專案的需求而定。
3. initialState 為初始的 state，可以是任意的資料型別，也可以是 callback Function，但要注意的是最後要 return 回一個值。
4. 承上 3 點基本說明，以下是一個基礎範例說明。

import React, { useState } from 'react'

const Example = () => {
  // useState 採用 0 為初始值
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

import React, { useState } from 'react'

const Example = () => {
  // useState 採用 callBack Function，必要 return 一個值
  const [count, setCount] = useState(() => {
    return 0
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}