AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當(dāng)前位置:首頁 > 科技  > 軟件

UseState是干啥的?有哪些坑?

來源: 責(zé)編: 時間:2024-06-14 17:37:13 121觀看
導(dǎo)讀前面的筆記里面說過在React16.8之前,函數(shù)式組件里你沒辦法初始化并使用狀態(tài)(state),在React16.8之后,useState就很好的解決了這個問題,它可以讓你在函數(shù)式組件里面使用state。簡單地說,你就把它當(dāng)做函數(shù)組件里的setState來用

前面的筆記里面說過在React16.8之前,函數(shù)式組件里你沒辦法初始化并使用狀態(tài)(state),在React16.8之后,useState就很好的解決了這個問題,它可以讓你在函數(shù)式組件里面使用state。UVN28資訊網(wǎng)——每日最新資訊28at.com

簡單地說,你就把它當(dāng)做函數(shù)組件里的setState來用就行了 基本用法:UVN28資訊網(wǎng)——每日最新資訊28at.com

用法很簡單,代碼如下:UVN28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片UVN28資訊網(wǎng)——每日最新資訊28at.com

如上所示,你只需要useState傳入一個初始值,然后它返回一個數(shù)組,數(shù)組第一個變量是state,數(shù)組第二個變量就是類似setState的方法 我自己整理了一些使用useState需要注意的地方,可能你也需要。UVN28資訊網(wǎng)——每日最新資訊28at.com

注意點

初始值傳入方法

這個問題是有次在我的技術(shù)群里粉絲問到的,大概就是在公司的歷史代碼里看到useState初始化的時候傳入了一個function,感覺到這種用法很少見,后來我查閱了文檔,發(fā)現(xiàn)這個確實很有意思。UVN28資訊網(wǎng)——每日最新資訊28at.com

先看看這個官方例子:UVN28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片UVN28資訊網(wǎng)——每日最新資訊28at.com

上面這個例子中,state的初始化我們是使用createInitialTodos這個方法來完成的。UVN28資訊網(wǎng)——每日最新資訊28at.com

看下控制臺,你會發(fā)現(xiàn)有個問題,每次todolist組件重新渲染的時候,createInitialTodos方法都會重新運行一次,但是,只有第一次的返回結(jié)果被useState使用,如果createInitialTodos在做非常耗時的計算的話,這就很消耗性能了。UVN28資訊網(wǎng)——每日最新資訊28at.com

所以,這里需要注意的是如果使用方法來初始化state,直接把它自身傳進(jìn)去就行了,不用運行它,也就是下面這樣寫代碼:UVN28資訊網(wǎng)——每日最新資訊28at.com

圖片UVN28資訊網(wǎng)——每日最新資訊28at.com

基于最新的state來改變state

這個問題在類組件的setState中也比較常見,直接看代碼:UVN28資訊網(wǎng)——每日最新資訊28at.com

圖片UVN28資訊網(wǎng)——每日最新資訊28at.com

上面這個例子,你以為調(diào)用了setAge三次,它就會從0加到3,那就大錯特錯了。UVN28資訊網(wǎng)——每日最新資訊28at.com

事實上,state這個東西你可以把它理解為一個快照(snapshot),你更新了它,但是它只會在下次render的時候才改變,也就是說你這樣連著調(diào)用三次setAge(age+1),每次取得都是當(dāng)前render中的快照,相當(dāng)于每次都是setAge(42+1),所以,最終結(jié)果是43,并不是45。UVN28資訊網(wǎng)——每日最新資訊28at.com

那么如果我就想基于最新的state來改變state,代碼可以這樣寫:UVN28資訊網(wǎng)——每日最新資訊28at.com

圖片UVN28資訊網(wǎng)——每日最新資訊28at.com

也就是給setAge傳入方法,這個方法接受上一個狀態(tài),返回新的狀態(tài)。UVN28資訊網(wǎng)——每日最新資訊28at.com

連續(xù)傳入三次方法,這三個方法就會進(jìn)入隊列中并且依次執(zhí)行,執(zhí)行完畢之后得到45,最后就拿著45去更新age。UVN28資訊網(wǎng)——每日最新資訊28at.com

這個在官方文檔里面也叫做批量更新state,都是使用給狀態(tài)更新方法傳入回調(diào)來實現(xiàn)的。UVN28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-93857-0.htmlUseState是干啥的?有哪些坑?

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 高可用解決方案詳解(八大主流架構(gòu)方案)

下一篇: ES14 中最具變革性的五個 JavaScript 特性

標(biāo)簽:
  • 熱門焦點
Top