React中useState的使用方法及注意事項

更新時間：2022年08月12日 14:18:14 作者：Ljwen_

useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關于React中useState的使用方法及注意事項的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、基本使用

useState是 react 提供的一個定義響應式變量的 hook 函數(shù)，基本語法如下：

const [count, setCount] = useState(initialCount)

它返回一個狀態(tài)和一個修改狀態(tài)的方法，狀態(tài)需要通過這個方法來進行修改；
initialCount 是我們傳入的一個初始狀態(tài)，它是惰性的，我們可以通過傳一個函數(shù)來返回一個值當作初始狀態(tài)，并且這個函數(shù)只會在初始渲染時執(zhí)行一次；

const [count, setCount] = useState(() => {
    const initialCount = someExpensiveComputation();
    return initialCount
})

接下來把定義好的狀態(tài)運用到頁面：

import { useState } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count + 1)
        // 傳入一個函數(shù)，更新的值是基于之前的值來執(zhí)行
        // setCount(count => count + 1)
    }
    return (
    	<div>
        	<h4>count: {count}</h4>
            <button onClick={ handleClick }>點擊更新狀態(tài)</button>
        </div>
    )
}

頁面渲染完成后，我們可以看到 count的值是 0，當我們點擊按鈕時，會將 count的值加 1，頁面也同時更新；

了解完基礎用法后，我們可以思考幾個問題；

setCount修改值時它是同步還是異步？
連續(xù)調(diào)用 setCount會發(fā)生什么？

第一個問題：setCount修改值時它是同步還是異步？

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
}

從圖中我們可以看出，頁面的值是更新了，但是控制臺打印的是之前的值，這是不是也表示 setCount是異步的呢？我們換一種方法，用異步來修改狀態(tài)；

const handleClick = () => {
    console.log("value1: ", count)
    setTimeout(() => {
        setCount(count => count + 1)
        console.log("value2: ", count)
    }, 0)
}

顯然，異步修改狀態(tài)跟同步修改狀態(tài)的結果是一致的，這也表明了 setCount 是異步更新的；那我們要怎么拿到更新后的值呢，我們可以用另外一個 hook 函數(shù) useRef，代碼如下：

function App() {
  const [count, setCount] = useState(0)
  const countRef = useRef(count)
  countRef.current = count
  const handleClick = () => {
    setCount(count => count + 1)
    console.log("value3: ", count)
    setTimeout(() => {
      console.log(countRef.current)
    }, 0)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>點擊更新狀態(tài)</button>
    </div>
  )
}

從圖中我們可以看出，我們已經(jīng)拿到了更新之后的值，useRef不僅可以用于訪問 DOM 節(jié)點，也可以用來表示一個容器，current屬性可以保存任何值，而且useRef返回的對象會在整個生命周期內(nèi)保持；

第二個問題：連續(xù)調(diào)用 setCount會發(fā)生什么？

（1）傳入一個基于狀態(tài)的值

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count + 1)
    console.log("value2: ", count)
    setCount(count + 1)
    console.log("value3: ", count)
}

從圖片可以看出，如果我們傳入的是一個普通值，他只會進行最后一次更新；

（2）傳入一個函數(shù)

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
    setCount(count => count + 1)
    console.log("value3: ", count)
}

可以看出，傳入一個函數(shù)的話，它會進行兩次賦值，因為它更新的值是基于之前的值來執(zhí)行，所以在開發(fā)中推薦使用函數(shù)傳入的形式進行修改；

二、注意事項

1、復雜變量的修改

對于復雜類型的變量我們修改時需要重新定義，在原來數(shù)據(jù)的基礎上修改不會引起組件的重新渲染，因為 React 組件的更新機制只進行淺對比，也就是更新某個復雜類型數(shù)據(jù)時只要它的引用地址沒變，就不會重新渲染組件；舉個例子

function App() {
    const [arr, setArr] = useState([1])
    const pushData = () => {
        arr.push(4)
        setArr(arr)
    }
    return (
        <div>
            <h4>{arr.join("-")}</h4>
            <button onClick={pushData}>點擊添加數(shù)組</button>
        </div>
    )
}

上面的代碼在點擊按鈕時，視圖不會發(fā)生變化，但是 arr的值是變化了，如果想修改這個數(shù)組，需要重新定義一個數(shù)組來修改，在原數(shù)組上的修改不會引起組件的重新渲染，React 組件的更新機制對只進行淺對比，也就是更新某個復雜類型數(shù)據(jù)時只要它的引用地址沒變，就不會重新渲染組件；

const pushData = () => {
    setArr([...arr, 4])
}

2、異步操作獲取更新的值

在類組件里面，修改值時異步操作可以拿到更新后的值，但是在函數(shù)組件，異步獲取是拿不到更新后的值的，舉個例子對比一下：

類組件

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count)
        setTimeout(() => {
            console.log(this.state.count)
        })
    }
    render() {
        return (
            <>
            <h4>count: {this.state.count}</h4>
            <button onClick={this.handleClick}>點擊更新狀態(tài)</button>
            </>
        );
    }
}

函數(shù)組件

function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count => count + 1)
        console.log("value1: ", count)
        setTimeout(() => {
            console.log("value2: ", count)
        })
    }
    return (
        <div>
            <h4>count: {count}</h4>
            <button onClick={handleClick}>點擊更新狀態(tài)</button>
        </div>
    )
}

顯然，在函數(shù)組件中是不能通過異步來獲取更新的值，我們可以通過 useRef來獲取；

const countRef = useRef(count)
countRef.current = count
const handleClick = () => {
    setCount(count => count + 1)
    console.log("value1: ", countRef.current)
    setTimeout(() => {
        console.log("value2: ", countRef.current)
    })
}

總結

到此這篇關于React中useState使用方法及注意事項的文章就介紹到這了,更多相關React中useState使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

探究react-native 源碼的圖片緩存問題
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
ReactJS?應用兼容ios9對標ie11解決方案
這篇文章主要為大家介紹了ReactJS?應用兼容ios9對標ie11解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
react項目中@路徑簡單配置指南
這篇文章主要給大家介紹了關于react項目中@路徑簡單配置的相關資料,文中還介紹了React配置@路徑別名的方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
在React中應用SOLID原則的方法
SOLID?是一套原則，它們主要是關心代碼質(zhì)量和可維護性的軟件專業(yè)人員的指導方針，本文給大家分享如何在React中應用SOLID原則，感興趣的朋友一起看看吧
2022-07-07
react.js 翻頁插件實例代碼
這篇文章主要介紹了react.js 翻頁插件實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-01-01
五分鐘教你了解一下react路由知識
本文主要介紹了react路由知識，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
ReactHooks批量更新state及獲取路由參數(shù)示例解析
這篇文章主要介紹了React Hooks如何實現(xiàn)批量更新state以及獲取路由參數(shù)的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-10-10
在React中實現(xiàn)Vue的插槽功能的示例代碼
在?Vue?中,插槽（Slots）允許父組件向子組件傳遞?HTML?結構,從而實現(xiàn)更靈活的組件復用,具名插槽允許父組件向子組件傳遞多個不同的?HTML?結構,在?React?中,我們沒有直接的插槽概念,但可以通過?props.children?和函數(shù)作為?props?來實現(xiàn)類似的功能
2025-01-01
react之組件通信詳解
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2021-10-10
React避免子組件無效刷新的三種解決方案
這篇文章主要給大家介紹了React三種避免子組件無效刷新的解決方案,使用React.memo,使用React.useMemo或React.useCallback,將子組件作為children來傳遞這三種方案,文章通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-08-08