【React Hook 02】useState

useState 顾名思义，
在 function component 中，
其功能相当於 State，
用以管理元件内部私有的状态资料

useState 的使用方式如下：

const [变数, set变数] = useState(初始值)

以下为使用范例

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

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

使用 useState 有以下几个要点：

• 命名规则一般为 camel case
• useState 函式使用阵列解构赋值，useState 回传阵列的第一个和第二个值，会分别赋值到 state 和 setState 两个变数上
• 设定的初始值不限型别，可以是 string、number、array、object 或 callBack Function（必须要有回传值）。因此当需要多个变数时，可依照需求呼叫多个 useState，或利用 array 跟 object 来统一管理
• 使用 useState 产生的变数遵守 JavaScript 规则为动态型别，如果需要限制型别，可搭配 TypeScript 等其他辅助工具。
• 更新时与 class component 合并原本的 state 不同，使用 useState 的 setState 更新 state 变数会直接取代原有变数。如果要保留其他未更动的变数，记得使用 ... 引入其他变数（见以下范例）

setState(state => ({
    ...state,
    fruit: {
        ...prevState.fruit,
        apple: 2,
        banana: 4,
    }
}))

参考资料：

• [React Hooks 学习笔记] useState、useEffect