useState的詳細(xì)解析

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

import { memo, useState } from "react"

const Counter2 = memo(() => {
  const [counter, setCounter] = useState(100)
  
  return (
    <div>
      <h2>當(dāng)前計數(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)入，是一個hook函數(shù), 官方中也將它成為State Hook, 它與class組件里面的 this.state 提供的功能完全相同;

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

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

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

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

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

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

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

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

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

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

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

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

Tip

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

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

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

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

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

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

當(dāng)然，我們也可以在一個組件中定義多個變量和復(fù)雜變量(數(shù)組、對象)文章來源地址http://www.zghlxwxcb.cn/news/detail-822559.html

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

到了這里，關(guān)于React Hook - useState函數(shù)的詳細(xì)解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！