React Hook中的useState函數的詳細解析

2022-10-28 14:01:11

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

到此這篇關於React Hook useState函數的詳細解析的文章就介紹到這了,更多相關React Hook useState函數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React Hook中的useState函數的詳細解析

useState的詳細解析

Tip

熱門文章