一、組件狀態(tài)管理——useState

1.定義

useState 是一個 React Hook（函數(shù)），它允許我們向組件添加一個狀態(tài)變量，從而控制影響組件的渲染結(jié)果 和普通JS變量不同的是，狀態(tài)變量一旦發(fā)生變化組件的視圖UI也會跟著變化（數(shù)據(jù)驅(qū)動視圖）

useState使用規(guī)則：

1.useState是一個函數(shù)，返回值是一個數(shù)組
2.數(shù)組中的第一個參數(shù)是狀態(tài)變量，第二個參數(shù)是set函數(shù)用來修改狀態(tài)變量
3.useState的參數(shù)將作為count的初始值

function App(){
  const [ count, setCount ] = React.useState(0)
  return (
    <div>
      <button onClick={()=>setCount(count+1)}>{ count }</button>
    </div>
  )
}

2.狀態(tài)的修改規(guī)則

在React中狀態(tài)被認(rèn)為是只讀的，我們應(yīng)該始終替換它而不是修改它, 直接修改狀態(tài)不能引發(fā)視圖更新

理解：

當(dāng)我們用解構(gòu)獲取到狀態(tài)count時，我們直接修改狀態(tài)，例如：count++，這樣修改無法引發(fā)視圖的更新；所以我們應(yīng)該替換他，給set方法傳入一個全新的值作為參數(shù)，這樣才能更新視圖

3.修改對象狀態(tài)

對于對象類型的狀態(tài)變量，應(yīng)該始終給set方法一個全新的對象來進(jìn)行修改

4.useState定義的變量和普通變量有什么區(qū)別？

1. 狀態(tài)管理

useState 變量：

使用 useState 定義的變量是 React 組件的狀態(tài)，React 會管理它的生命周期。你可以通過 setState 函數(shù)來更新這個狀態(tài)。

例如：const [count, setCount] = React.useState(0);

普通變量：

普通變量（例如 let 或 const 定義的變量）是普通的 JavaScript 變量，React 不會對它們進(jìn)行管理或跟蹤。

例如：let count = 0;

2. 組件更新

useState 變量：

當(dāng)你調(diào)用 setState 更新 useState 變量時，React 會重新渲染組件，更新 UI。

例如：setCount(count + 1); // 這會觸發(fā)組件重新渲染

普通變量：

更新普通變量不會觸發(fā)組件重新渲染，React 不會知道這個變量的值發(fā)生了變化。

例如：count += 1; // 這不會觸發(fā)組件重新渲染

3. 持久性

useState 變量：

useState 定義的變量在組件的生命周期內(nèi)保持持久性。即使組件重新渲染，變量的狀態(tài)仍然可以保持。例如，點擊按鈕多次會增加 count 的值，且這個值在不同的渲染中保持。

普通變量：

普通變量的值在每次組件重新渲染時會重置為初始值。這意味著你在渲染期間更改的任何值都不會在下一次渲染中保留。

let count = 0; function handleClick() { count += 1; // 僅在當(dāng)前渲染中有效，下一次渲染會重置為 0 }

4. 閉包問題

useState 變量：

使用 useState 時，更新狀態(tài)函數(shù)可以在閉包中使用，確保每次調(diào)用時都能訪問到最新的狀態(tài)。

普通變量：

如果在回調(diào)函數(shù)中使用普通變量，可能會出現(xiàn)閉包問題，導(dǎo)致你無法訪問到最新的值。

let count = 0; function handleClick() { setTimeout(() => {   console.log(count); // 會打印上一次渲染的值，而不是最新的值 }, 1000); }

總結(jié)

useState 定義的變量：是 React 組件的狀態(tài)，可以在組件中保持持久性，并在更新時觸發(fā)組件重新渲染。

普通變量：是 JavaScript 中的普通變量，React 不會管理它們，更新不會觸發(fā)組件重新渲染，也不會保持在組件的生命周期內(nèi)。

二、React副作用管理——useEffect

1.定義

useEffect是一個React Hook函數(shù)，用于在React組件中創(chuàng)建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如發(fā)送AJAX請求，更改DOM等等

說明：上面的組件中沒有發(fā)生任何的用戶事件，組件渲染完畢之后就需要和服務(wù)器要數(shù)據(jù)，整個過程屬于“只由渲染引起的操作”

2.useEffect依賴說明

useEffect副作用函數(shù)的執(zhí)行時機存在多種情況，根據(jù)傳入依賴項的不同，會有不同的執(zhí)行表現(xiàn)

說明：表格中1，3行的效果區(qū)別僅在是依賴項變化時執(zhí)行 

3.清除副作用

概念：在useEffect中編寫的由渲染本身引起的對接組件外部的操作，社區(qū)也經(jīng)常把它叫做副作用操作，比如在useEffect中開啟了一個定時器，我們想在組件卸載時把這個定時器再清理掉，這個過程就是清理副作用

說明：清除副作用的函數(shù)最常見的執(zhí)行時機是在組件卸載時自動執(zhí)行

下面是用定時器來演示清除副作用的具體例子 

import { useEffect, useState } from "react"
function Son () {
  // 1. 渲染時開啟一個定時器
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定時器執(zhí)行中...')
    }, 1000)
    return () => {
      // 清除副作用(組件卸載時)
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}
function App () {
  // 通過條件渲染模擬組件卸載
  const [show, setShow] = useState(true)
  return (
    <div>
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸載Son組件</button>
    </div>
  )
}
export default App

到此這篇關(guān)于React中的useState和useEffect解析的文章就介紹到這了,更多相關(guān)React useState和useEffect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論