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

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

useState的詳細(xì)解析

在上一篇文章中, 我用到useState來讓大家體驗(yàn)一下hooks函數(shù)

import { memo, useState } from "react"

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

export default Counter2

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

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

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

useState只有一個(gè)參數(shù): 接收一個(gè)初始化狀態(tài)的值(設(shè)置初始值)，在第一次組件被調(diào)用時(shí)使用來作為初始化值(如果不設(shè)置則默認(rèn)為undefined);

useState的返回值: 返回一個(gè)數(shù)組，數(shù)組包含兩個(gè)元素;

• 元素一: 當(dāng)前狀態(tài)的值(第一次調(diào)用為初始化值);
• 元素二: 是一個(gè)設(shè)置狀態(tài)值變化的函數(shù);
• 不過我們?nèi)绻偸鞘褂盟饕齺慝@取這兩個(gè)元素總是不方便的, 因此在開發(fā)中我們通常是會(huì)對(duì)數(shù)組進(jìn)行解構(gòu)(當(dāng)然要取什么名字是自定義的)
• 例如上面代碼: const [counter, setCounter] = useState(100)

上面代碼中, 點(diǎn)擊button按鈕后，會(huì)完成兩件事情:

調(diào)用元素二: setCounter，設(shè)置一個(gè)新的值;

組件重新渲染，并且根據(jù)新的值返回DOM結(jié)構(gòu);

相信通過上面的一個(gè)簡單案例，你已經(jīng)會(huì)喜歡上Hook的使用了。

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

但是使用它們會(huì)有兩個(gè)額外的規(guī)則:

只能在函數(shù)組件的頂層調(diào)用 Hook。不能在循環(huán)語句、條件判斷語句或者子函數(shù)中調(diào)用。

只能在 React 的函數(shù)組件和自定義hook中調(diào)用 Hook。不能在其他 JavaScript 函數(shù)中調(diào)用。

Tip

Hook 指的類似于useState、這樣的某一個(gè)函數(shù)

Hooks 是對(duì)這一類函數(shù)的統(tǒng)稱

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

“create” 可能不是很準(zhǔn)確，因?yàn)?state 只在組件首次渲染 的時(shí)候才會(huì)被創(chuàng)建。

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

這也是 Hook 的名字總是以 use 開頭的一個(gè)原因, 因?yàn)槟憧偸窃谑褂枚皇莿?chuàng)建。

當(dāng)然，我們也可以在一個(gè)組件中定義多個(gè)變量和復(fù)雜變量(數(shù)組、對(duì)象)

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

const App = memo(() => {
  // 簡單數(shù)據(jù)
  const [counter, setCounter] = useState(10)
  const [message, setMessage] = useState("Hello World")
  // 復(fù)雜數(shù)據(jù)
  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