React Hooks - useState

前一篇有提到在 function component 没有 this，不能使用 this.state 及 this.setState()，这时候我们就需要使用 Hook 的 useState 解决这个问题。
useState 会回传一对值 - 目前的 state 和 一个可以更新 state 的 function。
用法：
const [state, setState] = useState(initialState)
state 存放 state 的值，setState 设定 state 的值（用来更新 state），而 initialState 为第一次 render 时回传的 state 初始值。
setState(newState)
setState function 用来更新 state。

const [state, setState] = useState(initialState)　为解构赋值後的写法，下面会举例非解构赋值的写法。

将前一篇 class component state 改成 function component 的 useState：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
    </div>
  );
};
export default Hookstate;

前面有提到 useState 的语法是解构赋值，以上面程序码中的 count 为例，const [count, setCount] = useState(0)，在解构赋值的写法其实就是：

const state = useState(0);
const count = state[0];
const setCount = state[1];

• 如果新的 state 是用之前的 state 计算出，就要在 setState 里写一个 function，function 将接收先前的 state，并回传一个已更新的值。

例如：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  console.log("count : "+ count);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count => count + 1);
          setCount(count => count + 1);
          setCount(count => count + 1);
        }}
      >
        Click
      </button>
      <br />
    </div>
  );
};
export default Hookstate;

在 setCount() 里面放一个 function，它会自动去计算之前的值，执行上面的程序码後，按下 click 时 count 会变成 3，再按一下会变成 6，每次都加 3。

如果是在 setCount() 里面直接计算值，则每次的结果会被後面的结果覆盖掉，例如：

import React, { useState } from "react";
const Hookstate = () => {
  const [count, setCount] = useState(0);
  console.log("count : "+ count);
  return (
    <div>
      <h3>Hook - useState</h3>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }}
      >
        Click
      </button>
      <br />
    </div>
  );
};
export default Hookstate;

执行上面的程序码後，按下 click 时 count 会变成 1，再按一下变成 2，即使在 onClick 的 function 里面写了好几次 setCount(count + 1)，最後结果都只会加 1。

参考资料：
https://zh-hant.reactjs.org/docs/hooks-reference.html#usestate
https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-%E5%BE%9E%E6%9C%80%E5%9F%BA%E6%9C%AC%E7%9A%84-hook-%E9%96%8B%E5%A7%8B-usestate-useeffect-fee6582d8725