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

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

UseState是干啥的?有哪些坑?

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

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

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

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

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

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

注意點(diǎn)

初始值傳入方法

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

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

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

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

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

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

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

基于最新的state來改變state

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

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

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

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

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

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

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

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

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

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

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

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

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

標(biāo)簽:
  • 熱門焦點(diǎn)
  • SpringBoot中使用Cache提升接口性能詳解

    環(huán)境:springboot2.3.12.RELEASE + JSR107 + Ehcache + JPASpring 框架從 3.1 開始,對(duì) Spring 應(yīng)用程序提供了透明式添加緩存的支持。和事務(wù)支持一樣,抽象緩存允許一致地使用各
  • 如何通過Python線程池實(shí)現(xiàn)異步編程?

    線程池的概念和基本原理線程池是一種并發(fā)處理機(jī)制,它可以在程序啟動(dòng)時(shí)創(chuàng)建一組線程,并將它們置于等待任務(wù)的狀態(tài)。當(dāng)任務(wù)到達(dá)時(shí),線程池中的某個(gè)線程會(huì)被喚醒并執(zhí)行任務(wù),執(zhí)行完任
  • JVM優(yōu)化:實(shí)戰(zhàn)OutOfMemoryError異常

    一、Java堆溢出堆內(nèi)存中主要存放對(duì)象、數(shù)組等,只要不斷地創(chuàng)建這些對(duì)象,并且保證 GC Roots 到對(duì)象之間有可達(dá)路徑來避免垃 圾收集回收機(jī)制清除這些對(duì)象,當(dāng)這些對(duì)象所占空間超過
  • 中國(guó)家電海外掘金正當(dāng)時(shí)|出海專題

    作者|吳南南編輯|胡展嘉運(yùn)營(yíng)|陳佳慧出品|零態(tài)LT(ID:LingTai_LT)2023年,出海市場(chǎng)戰(zhàn)況空前,中國(guó)創(chuàng)業(yè)者在海外紛紛摩拳擦掌,以期能夠把中國(guó)的商業(yè)模式、創(chuàng)業(yè)理念、戰(zhàn)略打法輸出海外,他們依
  • 一條抖音4億人圍觀 ! 這家MCN比無憂傳媒還野

    作者:Hiu 來源:互聯(lián)網(wǎng)品牌官01 擦邊少女空降熱搜,幕后推手曝光被網(wǎng)友譽(yù)為“純欲天花板”的女網(wǎng)紅井川里予,近期因?yàn)橐唤M哥特風(fēng)照片登上熱搜,引發(fā)了一場(chǎng)互聯(lián)網(wǎng)世界關(guān)于
  • 消息稱小米汽車開始篩選交付中心:需至少120個(gè)車位

    IT之家 7 月 7 日消息,日前,有微博簡(jiǎn)介為“汽車行業(yè)從業(yè)者、長(zhǎng)三角一體化擁護(hù)者”的微博用戶 @長(zhǎng)三角行健者 發(fā)文表示,據(jù)經(jīng)銷商集團(tuán)反饋,小米汽車目前
  • 華為將推出盤古數(shù)字人大模型 可幫助用戶12小時(shí)完成數(shù)字人生成

    在今日舉行的2023年華為云數(shù)字文娛AI創(chuàng)新峰會(huì)上,華為云全球Marketing與銷售服務(wù)總裁石冀琳表示,華為云將在后續(xù)推出盤古數(shù)字人大模型,可幫助用戶12小
  • 蘋果、三星、惠普等暫停向印度出口筆記本和平板電腦

    集微網(wǎng)消息,據(jù)彭博社報(bào)道,在8月3日印度突然禁止在沒有許可證的情況下向印度進(jìn)口電腦/平板及顯示器等產(chǎn)品后,蘋果、三星電子和惠普等大公司暫停向印度
  • 三星折疊屏手機(jī)去年銷售近1000萬臺(tái) 今年目標(biāo)定為1500萬

    7月29日消息,三星率先發(fā)力可折疊手機(jī)市場(chǎng),在全球市場(chǎng)已經(jīng)取得了非常亮眼的成績(jī),接下來會(huì)進(jìn)一步鞏固和擴(kuò)大這一優(yōu)勢(shì)。三星在推出Galaxy Z Flip5和Galax
Top