快捷導(dǎo)航

React?18中的state概念與使用、注意問題解決

更新時(shí)間：2022年12月15日 15:40:51 作者：_七七

state和props類似，都是一種存儲(chǔ)屬性的方式，但是不同點(diǎn)在于state只屬于當(dāng)前組件，其他組件無法訪問，這篇文章主要介紹了React?18中的state概念與使用、注意問題，需要的朋友可以參考下

一、概念與基本使用

props中的所有屬性都是不可變的，這使得React組件不能隨著props的改變而改變。但在實(shí)際的開發(fā)中，我們更希望的是數(shù)據(jù)發(fā)生變化時(shí)，頁面也會(huì)隨著數(shù)據(jù)一起變化。React為我們提供了state用來解決這個(gè)問題。

state和props類似，都是一種存儲(chǔ)屬性的方式，但是不同點(diǎn)在于state只屬于當(dāng)前組件，其他組件無法訪問。并且state是可變的，當(dāng)其發(fā)生變化后組件會(huì)自動(dòng)重新渲染，以使變化在頁面中呈現(xiàn)。

在React中，當(dāng)組件渲染完畢后，再修改組件中的變量，不會(huì)使組件重新渲染。
要使得組件可以收到變量的影響，必須在變量修改后對(duì)組件進(jìn)行重新渲染。
這里我們就需要一個(gè)特殊變量，當(dāng)這個(gè)變量被修改時(shí)，組件會(huì)自動(dòng)重新渲染。

state相當(dāng)于一個(gè)變量，
只是這個(gè)變量在React中進(jìn)行了注冊(cè)，
React會(huì)監(jiān)控這個(gè)變量的變化，當(dāng)state發(fā)生變化時(shí)，會(huì)自動(dòng)觸發(fā)組件的重新渲染
使得我們的修改可以在頁面中呈現(xiàn)出來。

在函數(shù)組件中，我們需要通過鉤子函數(shù)，獲取state。

使用鉤子 useState() 來創(chuàng)建state。

import {useState} from "react";

它需要一個(gè)值作為參數(shù)，這個(gè)值就是state的初始值
該函數(shù)會(huì)返回一個(gè)數(shù)組

數(shù)組中第一個(gè)元素，是初始值
初始值只用來顯示數(shù)據(jù)，直接修改不會(huì)觸發(fā)組件的重新渲染數(shù)組中的第二個(gè)元素，是一個(gè)函數(shù)，通常會(huì)命名為setXxx
這個(gè)函數(shù)用來修改state，調(diào)用其修改state后會(huì)觸發(fā)組件的重新渲染，并且使用函數(shù)中的值作為新的state值

現(xiàn)有如下組件Clock：

在這里插入圖片描述

現(xiàn)在我們希望點(diǎn)擊按鈕以后，時(shí)間可以刷新直接顯示一個(gè)當(dāng)前的最新日期。希望頁面重新渲染。但是，如果直接在clickHandler中修改date的值是無效的，像這樣：

在這里插入圖片描述

在函數(shù)中使用state我們需要使用一種鉤子（hook）函數(shù)。鉤子函數(shù)可以在函數(shù)組件中“勾出”React的特性，換句話說我們要用一個(gè)函數(shù)“勾出”state。

語法：

const [state, setState] = useState(initialState);

通過鉤子函數(shù)useState()勾出state，useState()中需要傳遞一個(gè)初始值，這個(gè)值就是你希望在變量中存儲(chǔ)的值。
函數(shù)會(huì)返回一個(gè)數(shù)組，數(shù)組中有兩個(gè)元素，第一個(gè)元素是存儲(chǔ)了值的變量，第二個(gè)元素是一個(gè)函數(shù)用來對(duì)值進(jìn)行修改。
比如上邊的案例，可以這樣修改：

在這里插入圖片描述

使用useState()“勾出”的變量就是一個(gè)普通變量，它里邊存儲(chǔ)了初始化的值，這個(gè)變量和其他變量沒什么大區(qū)別，同樣修改這個(gè)變量的值也不會(huì)對(duì)組件產(chǎn)生實(shí)質(zhì)性的影響，所以不要嘗試直接為state賦值。useState()“勾出”的函數(shù)用來修改state的值，他需要一個(gè)新的state值作為參數(shù)，調(diào)用后會(huì)觸發(fā)組件的重新渲染，從而使得頁面刷新，在每次的重新渲染中都會(huì)使用新的state值作為參數(shù)。

二、注意問題

引出問題

有了state，使得React組件可以隨著某個(gè)值的改變而改變，我們無需再在某個(gè)值發(fā)生變化后重新手動(dòng)對(duì)界面進(jìn)行構(gòu)建，React會(huì)替我們完成這些工作，大大降低了我們開發(fā)的難度。

但是state中還隱藏著一些不太容易發(fā)現(xiàn)的問題，現(xiàn)在假設(shè)我們需要開發(fā)一個(gè)計(jì)數(shù)器組件，這個(gè)組件非常簡(jiǎn)單，有一個(gè)按鈕和一個(gè)數(shù)字，每點(diǎn)擊一次按鈕數(shù)字就會(huì)增加1，大概長(zhǎng)成這個(gè)樣子：

在這里插入圖片描述

點(diǎn)擊按鈕以后，數(shù)字就會(huì)增加1，這個(gè)組件的實(shí)現(xiàn)很簡(jiǎn)單：

Counter.js

在這里插入圖片描述

在clickHandler()中，我們調(diào)用了setCount(count+1)來對(duì)count進(jìn)行更新，每次更新都是在前一次值的基礎(chǔ)上增加1。這個(gè)代碼這么寫在大部分的場(chǎng)景下都不會(huì)帶來任何的問題，但是在某些情況下就不一定了。

產(chǎn)生問題的原因

在React中我們通過setState()修改狀態(tài)都是異步完成的，換句話說并不是調(diào)用完setState()后狀態(tài)立刻就發(fā)生變化，而是需要等上一段時(shí)間，當(dāng)然這段時(shí)間不會(huì)很長(zhǎng)。
像上邊的案例中state的修改雖然是異步完成的，但是由于功能比較簡(jiǎn)單，等待時(shí)間幾乎可以忽略不計(jì)。但隨著功能復(fù)雜度的提升，這個(gè)間隔會(huì)逐漸增多。

問題演示

假設(shè)調(diào)用setState()后1秒state的值才會(huì)真的改變，這時(shí)如果我們連續(xù)點(diǎn)擊按鈕2次，第1次點(diǎn)擊按鈕時(shí)count值是1，第2次點(diǎn)擊速度比較快，從而兩次間隔沒有超過1秒，此時(shí)的count值依然是1，這就導(dǎo)致我點(diǎn)擊了兩次按鈕，但是值只增加了1次，因?yàn)閮纱蝐ount+1中的count都是1。

為了演示問題，可以將上述案例的setCount()放入到一個(gè)延時(shí)調(diào)用中：

在這里插入圖片描述

這樣一來，點(diǎn)擊按鈕后1秒setCount()才會(huì)調(diào)用，如果我們?cè)?秒內(nèi)點(diǎn)擊按鈕多次，你會(huì)發(fā)現(xiàn)按鈕數(shù)值只會(huì)增加一次，很顯然我們不希望這種情況出現(xiàn)。

解決問題

要解決這個(gè)問題，其實(shí)也不難，在setState()時(shí)除了直接傳遞一個(gè)指定值以外，React還允許我們通過一個(gè)回調(diào)函數(shù)來修改state，回調(diào)函數(shù)的返回值就是新的state的值，使用回調(diào)函數(shù)的好處是，這個(gè)回調(diào)函數(shù)會(huì)確保上一次的setState()調(diào)用完成后才被調(diào)用，同時(shí)會(huì)使用最新的state值作為回調(diào)函數(shù)的第一個(gè)參數(shù)。這樣一來就有效的避免了無法正確獲取上一個(gè)state值的問題。

上邊案例中的 setCount(count+1);可以改成這個(gè)樣子：

setCount(prevState => prevState+1);

在這里插入圖片描述

這樣一來，函數(shù)中的prevState總是上次修改后的最新state，避免再次出現(xiàn)點(diǎn)擊多次按鈕只修改一次的問題。總的來說，當(dāng)我們修改一個(gè)state的值而需要依賴于前邊的值進(jìn)行計(jì)算時(shí)，最安全的方式就是通過回調(diào)函數(shù)而不是直接修改。

在這里插入圖片描述