useState => 讓函數組件具有維持狀態的能力
useState 這個 Hook 是用來管理 state 的，它可以讓函數組件具有維持狀態的能力。即在一個函數組件的多次渲染之間，這個 state 是共享的。

Hooks 的最大的作用就是可以讓你在不編寫class的情況下使用state以及其他的 React 特性

useState的詳細解析

在上一篇文章中, 我用到useState來讓大家體驗一下hooks函數

import { memo, useState } from "react"

const Counter2 = memo(() => {
  const [counter, setCounter] = useState(100)
  
  return (
    <div>
      <h2>當前計數: {counter}</h2>
      <button onClick={() => setCounter(counter - 1)}>-1</button>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </div>
  )
})

export default Counter2

那么接下來我們來先研究一下上面核心的一段代碼代表什么意思

useState來自react，需要從react中導入，是一個hook函數, 官方中也將它成為State Hook, 它與class組件里面的 this.state 提供的功能完全相同;

一般來說，在函數退出后變量就會”消失”，而 state 中的變量會被 React 保留。

useState只有一個參數: 接收一個初始化狀態的值(設置初始值)，在第一次組件被調用時使用來作為初始化值(如果不設置則默認為undefined);

useState的返回值: 返回一個數組，數組包含兩個元素;

• 元素一: 當前狀態的值(第一次調用為初始化值);
• 元素二: 是一個設置狀態值變化的函數;
• 不過我們如果總是使用索引來獲取這兩個元素總是不方便的, 因此在開發中我們通常是會對數組進行解構(當然要取什么名字是自定義的)
• 例如上面代碼: const [counter, setCounter] = useState(100)

上面代碼中, 點擊button按鈕后，會完成兩件事情:

調用元素二: setCounter，設置一個新的值;

組件重新渲染，并且根據新的值返回DOM結構;

相信通過上面的一個簡單案例，你已經會喜歡上Hook的使用了。

Hook 就是 JavaScript 函數，這個函數可以幫助你鉤入(hook into) React State以及生命周期等特性;

但是使用它們會有兩個額外的規則:

只能在函數組件的頂層調用 Hook。不能在循環語句、條件判斷語句或者子函數中調用。

只能在 React 的函數組件和自定義hook中調用 Hook。不能在其他 JavaScript 函數中調用。

Tip

Hook 指的類似于useState、這樣的某一個函數

Hooks 是對這一類函數的統稱

大家可能有疑惑: 為什么叫 useState 而不叫 createState?

“create” 可能不是很準確，因為 state 只在組件首次渲染 的時候才會被創建。

在下一次重新渲染時，就已經不是創建了, useState 會返回給我們當前所保存的state(如果每次都創建新的變量，它就不是 “state”了)。

這也是 Hook 的名字總是以 use 開頭的一個原因, 因為你總是在使用而不是創建。

當然，我們也可以在一個組件中定義多個變量和復雜變量(數組、對象)

import React, { memo, useState } from 'react'

const App = memo(() => {
  // 簡單數據
  const [counter, setCounter] = useState(10)
  const [message, setMessage] = useState("Hello World")
  // 復雜數據
  const [banners, setBanners] = useState(["aaa", "bbb", "ccc"])
  const [infos, setInfos] = useState({
    name: "chenyq",
    age: 18,
    height: 1.88
  })
  
  function changeNumber() {
    setCounter(counter + 1)
  }

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={changeNumber}>+1</button>
      <h2>{message}</h2>
      <h2>{banners}</h2>
      <h2>{infos.name}-{infos.age}-{infos.height}</h2>
    </div>
  )
})

export default App