了解react-hook以及State Hook

react更新到16.8版本後最主要的内容就是增加了hook這個特性，它的主要作用可以了解為對react的函數元件進行了一次更新，使react的函數元件擁有了和react類元件一樣的功能（關于以前版本react的元件的介紹可以移步到這裡觀看：react建立元件的幾種方法，以及差別）。

Hook是什麼：

Hook 是一些可以讓你在函數元件裡“鈎入” React state 及生命周期等特性的函數。Hook 不能在 class 元件中使用 —— 這使得你不使用 class 也能使用 React。

React 内置了一些像 useState 這樣的 Hook。你也可以建立你自己的 Hook 來複用不同元件之間的狀态邏輯。

首先我們來學習第一個hook

useState()

import React, { useState } from 'react'

export default function Main() {
    const [count, setCount] = useState(0);

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

使用步驟：

1. 首先引入從’react’中引入useState。
2. 在return之前定義一個數組，數組裡面有倆個參數，第一個相當于類元件當中的this.state.xxx，而第二個參數就是一個方法，改變前一個參數值的方法。指派為上面導入的useState()括号裡面設定初始值，傳遞多個參數無用，隻會找到你的第一個參數然後解構給你的數組第一個值。我們控制台輸出一下useState()會更直覺一些。

console.log(useState())
console.log(useState(1))
console.log(useState('12',55))
           

輸出結果如下：

可以看到，我們如果不給初始值的話就是undefined，如果給多個值的話會忽略後面的值。PS：定義初始值的時候要注意資料類型哦。

第二個參數的方法就是用來改變這個值的。

<button onClick={() => setCount(count + 1)}>
  Click me
</button>
           

在一個元件内部可以建立多個State變量。

const [count, setCount] = useState(0);
const [age, setAge] = useState(16);
const [name, setName] = useState('吳小迪');
           

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