一、概念與基本使用

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

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

在React中，當組件渲染完畢后，再修改組件中的變量，不會使組件重新渲染。
要使得組件可以收到變量的影響，必須在變量修改后對組件進行重新渲染。
這里我們就需要一個特殊變量，當這個變量被修改時，組件會自動重新渲染。

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

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

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

import {useState} from "react";

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

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

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

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

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

語法：

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

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

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

二、注意問題

引出問題

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

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

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

Counter.js

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

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

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

問題演示

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

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

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

解決問題

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

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

setCount(prevState => prevState+1);

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

到此這篇關于React 18中的state概念與使用、注意問題的文章就介紹到這了,更多相關React state概念與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論