前言

React-hooks 正式發(fā)布以后， useState 可以使函數(shù)組件像類(lèi)組件一樣擁有 state，也就說(shuō)明函數(shù)組件可以通過(guò) useState 改變 UI 視圖。那么 useState 到底應(yīng)該如何使用，底層又是怎么運(yùn)作的呢，首先一起看一下 useState 。

基本用法

[ state , dispatch ] = useState(initData)

• state，目的提供給 UI ，作為渲染視圖的數(shù)據(jù)源。
• dispatch 改變 state 的函數(shù)，可以理解為推動(dòng)函數(shù)組件渲染的渲染函數(shù)。
• initData 有兩種情況，第一種情況是非函數(shù)，將作為 state 初始化的值。 第二種情況是函數(shù)，函數(shù)的返回值作為 useState 初始化的值。

initData為非函數(shù)的情況

/* 此時(shí)將把 0 作為初使值 */const [ num , setNum ] = useState(0)

initData為函數(shù)的情況

每當(dāng) React 重新渲染組件時(shí)，都會(huì)執(zhí)行useState(initData)。 如果初始狀態(tài)是原始值（數(shù)字，布爾值等），則不會(huì)有性能問(wèn)題。

當(dāng)初始狀態(tài)需要昂貴的性能方面的操作時(shí)，可以通過(guò)為useState(computeInitialState)提供一個(gè)函數(shù)來(lái)使用狀態(tài)的延遲初始化，如下所示：

function MyComponent({ bigJsonData }) {
  const [value, setValue] = useState(function getInitialData() {
    const object = JSON.parse(bigJsonData); 
    return object.initialValue;
  });
}

getInitialData()僅在初始渲染時(shí)執(zhí)行一次，以獲得初始狀態(tài)。在以后的組件渲染中，不會(huì)再調(diào)用getInitialData()，從而跳過(guò)昂貴的操作。

state變化監(jiān)聽(tīng)

類(lèi)組件 setState 中，有第二個(gè)參數(shù) callback 或者是生命周期 componentDidUpdat 可以檢測(cè)監(jiān)聽(tīng)到 state 改變或是組件更新。

那么在函數(shù)組件中，如何怎么監(jiān)聽(tīng) state 變化呢？這個(gè)時(shí)候就需要 useEffect 出場(chǎng)了，通?？梢园?state 作為依賴項(xiàng)傳入 useEffect 第二個(gè)參數(shù) deps ，但是注意 useEffect 初始化會(huì)默認(rèn)執(zhí)行一次。

具體可以參考如下 Demo :

import { useState, useEffect } from "react";
export default function App() {
  const [num, setNum] = useState(0);
  /* 監(jiān)聽(tīng) num 變化 */
  useEffect(() => {
    console.log("監(jiān)聽(tīng)num變化，此時(shí)的num是:  " + num);
  }, [num]);
  const handerClick = () => {
    setNum(1);
    setTimeout(() => {
      setNum(3);
    });
  };
  console.log(num);
  return (
    <div>
      <span> {num}</span>
      <button onClick={handerClick}>num++</button>
    </div>
  );
}

點(diǎn)擊按鈕后輸出：

0
監(jiān)聽(tīng)num變化，此時(shí)的num是:  0
1
監(jiān)聽(tīng)num變化，此時(shí)的num是:  1
3
監(jiān)聽(tīng)num變化，此時(shí)的num是:  3

我們?cè)侔焉厦娴膁emo改成這樣，看看會(huì)輸出什么：

const [ num , setNum ] = React.useState(0)
const handleClick = ()=>{
    setNum(1) 
    console.log(num)
    setTimeout(()=>{
        setNum(3) 
        console.log(num)
    })   
}

結(jié)果：0 0 0

原因很簡(jiǎn)單，函數(shù)組件更新就是函數(shù)的執(zhí)行，在函數(shù)一次執(zhí)行過(guò)程中，函數(shù)內(nèi)部所有變量重新聲明，所以改變的 state ，只有在下一次函數(shù)組件執(zhí)行時(shí)才會(huì)被更新。所以在如上同一個(gè)函數(shù)執(zhí)行上下文中，number 一直為0，無(wú)論怎么打印，都拿不到最新的 state 。

我們只需要記?。涸诒敬魏瘮?shù)執(zhí)行上下文中，是獲取不到最新的 state 值的就可以了

過(guò)時(shí)狀態(tài)問(wèn)題

閉包是一個(gè)從外部作用域捕獲變量的函數(shù)。

閉包（例如事件處理程序，回調(diào)）可能會(huì)從函數(shù)組件作用域中捕獲狀態(tài)變量。 由于狀態(tài)變量在渲染之間變化，因此閉包應(yīng)捕獲具有最新?tīng)顟B(tài)值的變量。否則，如果閉包捕獲了過(guò)時(shí)的狀態(tài)值，則可能會(huì)遇到過(guò)時(shí)的狀態(tài)問(wèn)題。

來(lái)看看一個(gè)過(guò)時(shí)的狀態(tài)是如何表現(xiàn)出來(lái)的。組件<DelayedCount>延遲3秒計(jì)數(shù)按鈕點(diǎn)擊的次數(shù)

import React, { useState } from 'react';
function DelayedCount() {
  const [count, setCount] = useState(0);
  const handleClickAsync = () => {
    setTimeout(function delay() {
      setCount(count + 1);
    }, 3000);
  }
  return (
    <div>
      {count}
      <button onClick={handleClickAsync}>Increase async</button>
    </div>
  );
}

快速多次點(diǎn)擊按鈕。count 變量不能正確記錄實(shí)際點(diǎn)擊次數(shù)，有些點(diǎn)擊被吃掉。

delay() 是一個(gè)過(guò)時(shí)的閉包，它從初始渲染（使用0初始化時(shí)）中捕獲了過(guò)時(shí)的count變量。

為了解決這個(gè)問(wèn)題，使用函數(shù)方法來(lái)更新count狀態(tài)：

import React, { useState } from 'react';
function DelayedCount() {
  const [count, setCount] = useState(0);
  const handleClickAsync = () => {
    setTimeout(function delay() {
      setCount(count => count + 1);
    }, 3000);
  }
  return (
    <div>
      {count}
      <button onClick={handleClickAsync}>Increase async</button>
    </div>
  );
}

現(xiàn)在setCount(count => count + 1)在delay()中正確更新計(jì)數(shù)狀態(tài)。React 確保將最新?tīng)顟B(tài)值作為參數(shù)提供給更新?tīng)顟B(tài)函數(shù)，過(guò)時(shí)閉包的問(wèn)題解決了。

快速單擊按鈕。 延遲過(guò)去后，count 能正確表示點(diǎn)擊次數(shù)。

更新引用數(shù)據(jù)類(lèi)型

在使用 useState 的 dispatchAction 更新 state 的時(shí)候，記得不要傳入相同的 state，這樣會(huì)使視圖不更新：

const textObj = {name:'yinjie'}
const [useState1, setUseState1] = useState(textObj)
setUseState1((oldUseState1) => {
	oldUseState1.name = 'xxx'
    return oldUseState1
}
useEffect(() => {
	console.log(useState1)  
},[useState1])
//結(jié)果是沒(méi)有任何反應(yīng)

為什么會(huì)造成這個(gè)原因呢？

在 useState 的 dispatchAction 處理邏輯中，會(huì)淺比較兩次 state ，發(fā)現(xiàn) state 相同，不會(huì)開(kāi)啟更新調(diào)度任務(wù)；demo 中兩次 state 指向了相同的內(nèi)存空間，所以默認(rèn)為 state 相等，就不會(huì)發(fā)生視圖更新了。

解決方法：

const textObj = {name:'yinjie'}
const [useState1, setUseState1] = useState(textObj)
setUseState1((oldUseState1) => {
	oldUseState1.name = 'xxx'
	/** 返回一個(gè)新的對(duì)象,useEffectc才能檢測(cè)得到 */
    return {...oldUseState1}
}
useEffect(() => {
	console.log(useState1)  // {name: "xxx"}
},[useState1])

在上面的 demo 中我們淺拷貝了對(duì)象，重新申請(qǐng)了一個(gè)內(nèi)存空間。

useState 實(shí)現(xiàn)原理

下面簡(jiǎn)單寫(xiě)一下useState的實(shí)現(xiàn)原理：

function useState(init) {
	let state;
	// useState無(wú)法保存函數(shù)
	if(typeof init === 'function') {
		state = init()
	} else {
		state = init
	}
	const setState = (change) => {
		// 判斷一下是否傳遞過(guò)來(lái)的是函數(shù)
		if(typeof change === 'function') {
			// 如果是函數(shù)，調(diào)用，并將之前的state傳過(guò)去，接收到的返回值作為新的state并賦值
			state = change(state)
		} else {
			// 如果不是函數(shù)，直接賦值
			state = change;
		}
	}	
	return [state, setState]
}

到此這篇關(guān)于React useState超詳細(xì)講解用法的文章就介紹到這了,更多相關(guān)React useState內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論