日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

UseState是干啥的?有哪些坑?

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

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

簡單地說,你就把它當做函數組件里的setState來用就行了 基本用法:6L228資訊網——每日最新資訊28at.com

用法很簡單,代碼如下:6L228資訊網——每日最新資訊28at.com

圖片圖片6L228資訊網——每日最新資訊28at.com

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

注意點

初始值傳入方法

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

先看看這個官方例子:6L228資訊網——每日最新資訊28at.com

圖片圖片6L228資訊網——每日最新資訊28at.com

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

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

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

圖片6L228資訊網——每日最新資訊28at.com

基于最新的state來改變state

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

圖片6L228資訊網——每日最新資訊28at.com

上面這個例子,你以為調用了setAge三次,它就會從0加到3,那就大錯特錯了。6L228資訊網——每日最新資訊28at.com

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

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

圖片6L228資訊網——每日最新資訊28at.com

也就是給setAge傳入方法,這個方法接受上一個狀態,返回新的狀態。6L228資訊網——每日最新資訊28at.com

連續傳入三次方法,這三個方法就會進入隊列中并且依次執行,執行完畢之后得到45,最后就拿著45去更新age。6L228資訊網——每日最新資訊28at.com

這個在官方文檔里面也叫做批量更新state,都是使用給狀態更新方法傳入回調來實現的。6L228資訊網——每日最新資訊28at.com

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

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

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

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

標簽:
  • 熱門焦點
  • Rust中的高吞吐量流處理

    作者 | Noz編譯 | 王瑞平本篇文章主要介紹了Rust中流處理的概念、方法和優化。作者不僅介紹了流處理的基本概念以及Rust中常用的流處理庫,還使用這些庫實現了一個流處理程序
  • 三言兩語說透設計模式的藝術-單例模式

    寫在前面單例模式是一種常用的軟件設計模式,它所創建的對象只有一個實例,且該實例易于被外界訪問。單例對象由于只有一個實例,所以它可以方便地被系統中的其他對象共享,從而減少
  • Flowable工作流引擎的科普與實踐

    一.引言當我們在日常工作和業務中需要進行各種審批流程時,可能會面臨一系列技術和業務上的挑戰。手動處理這些審批流程可能會導致開發成本的增加以及業務復雜度的上升。在這
  • 這款新興工具平臺,讓你的電腦效率翻倍

    隨著信息技術的發展,我們獲取信息的渠道越來越多,但是處理信息的效率卻成為一個瓶頸。于是各種工具應運而生,都在爭相解決我們的工作效率問題。今天我要給大家介紹一款效率
  • 共享單車的故事講到哪了?

    來源丨??素斀浥c共享充電寶相差不多,共享單車已很久沒有被國內熱點新聞關照到了。除了一再漲價和用戶直呼用不起了。近日多家媒體再發報道稱,成都、天津、鄭州等地多個共享單
  • 大廠卷向扁平化

    來源:新熵作者丨南枝 編輯丨月見大廠職級不香了。俗話說,兵無常勢,水無常形,互聯網企業調整職級體系并不稀奇。7月13日,淘寶天貓集團啟動了近年來最大的人力制度改革,目前已形成一
  • 網傳小米汽車開始篩選交付中心 建筑面積不低于3000平方米

    7月7日消息,近日有微博網友@長三角行健者爆料稱,據經銷商集團反饋,小米汽車目前已經開始了交付中心的篩選工作,要求候選場地至少有120個車位,建筑不能低
  • 蘋果MacBook Pro 2021測試:仍不支持平滑滾動

    據10月30日9to5 Mac 消息報道,蘋果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后獲得了不錯的評價,亮點包括行業領先的性能,令人印象深刻的電池續航,精美豐
  • 由于成本持續增加,筆記本產品價格預計將明顯上漲

    根據知情人士透露,由于材料、物流等成本持續增加,筆記本產品價格預計將在2021年下半年有明顯上漲。進入6月下旬以來,全球半導體芯片缺貨情況加劇,顯卡、處理器
Top 主站蜘蛛池模板: 福海县| 绩溪县| 奇台县| 京山县| 尼勒克县| 宁德市| 汉寿县| 宝坻区| 塔城市| 海阳市| 科技| 信阳市| 左云县| 亳州市| 绥德县| 临沂市| 藁城市| 樟树市| 宣汉县| 湖北省| 昌都县| 庆安县| 武威市| 普陀区| 喀喇沁旗| 咸丰县| 环江| 抚宁县| 应用必备| 新余市| 台北市| 永年县| 独山县| 米林县| 阿鲁科尔沁旗| 莫力| 馆陶县| 乌恰县| 江门市| 溧水县| 南木林县|