[Day - 28] React Hooks useState 学习笔记

前言

这篇文章将会介绍 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>
  )
}