久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  應(yīng)聘面試  >  html5面試題  > React Hooks各種函數(shù)介紹

React Hooks各種函數(shù)介紹

來源:千鋒教育
發(fā)布人:syq
時間: 2022-11-16 16:58:37 1668589117

  - useState: useState是用于聲明一個狀態(tài)變量的,用于為函數(shù)組件引入狀態(tài). useState 只接收一個參數(shù),這個參數(shù)可以是數(shù)字、字符串、對象等任意值,用于初始化聲明的狀態(tài)變量。

  也可以是一個返回初始值的函數(shù),最好是函數(shù),可在渲染時減少不必要的計算。返回一個長度為2的讀寫數(shù)組,數(shù)組的第一項是定義的狀態(tài)變量本身,第二項是一個用來更新該狀態(tài)變量的函數(shù),約定是set前綴加上狀態(tài)的變量名. useState Hook 中返回的 setState,并不會幫我們自動合并對象狀態(tài)的屬性;

React Hooks各種函數(shù)

  setState中接收的對象參數(shù)如果地址沒變的話會被React認(rèn)為沒有改變,因此不會引起視圖的更新

  - useReducer: useReducer 是 useState 的升級版。

  在useState中返回的寫接口中,我們只能傳遞最終的結(jié)果,在setN的內(nèi)部也只是簡單的賦值操作。 創(chuàng)建初始狀態(tài)值initialState, 創(chuàng)建包含所有操作的 reducer(state, action) 函數(shù),每種操作類型均返回新的 state 值 根據(jù) initialState 和 reducer 使用 const [state, dispatch] = useReducer(reducer, initialState) 得到讀寫API調(diào)用寫接口,傳遞的參數(shù)均掛在 action 對象上

  - useContext: context是上下文的意思,上下文是局部的全局變量這個局部的范圍由開發(fā)者自己指

  - useEffect: effect是副作用的意思,對環(huán)境的改變就是副作用。副作用是函數(shù)式編程里的一個概念在React中,useEffect就是在每次render后執(zhí)行的操作,相當(dāng)于 afterRender, 接收的第一個參數(shù)是回調(diào)函數(shù),第二個參數(shù)是回調(diào)時機??捎迷诤瘮?shù)組件中模擬生命周期。 如果同時出現(xiàn)多個 useEffect ,會按出現(xiàn)順序依次執(zhí)行

  - useLayoutEffect useEffect總是在瀏覽器渲染完視圖過后才執(zhí)行,如果 useEffect 里面的回調(diào)函數(shù)有對 DOM 視圖的操作,則會出現(xiàn)一開始是初始化的視圖,后來執(zhí)行了 useEffect里的回調(diào)后立馬改變了視圖的某一部分,會出現(xiàn)一個閃爍的狀態(tài)。 為了避免這種閃爍,可以將副作用的回調(diào)函數(shù)提前到瀏覽器渲染視圖的前面執(zhí)行,當(dāng)還沒有將 DOM掛載到頁面顯示前執(zhí)行Effect中對DOM進(jìn)行操作的回調(diào)函數(shù),則在瀏覽器渲染到頁面后不會出現(xiàn)閃爍的狀態(tài)。layout 是視圖的意思,useLayoutEffect 就是在視圖顯示出來前執(zhí)行的副作用。useEffect 和 useLayoutEffect就是執(zhí)行的時間點不同,useLayoutEffect是在瀏覽器渲染前執(zhí)行,useEffect 是在瀏覽器渲染后執(zhí)行。

  但二者都是在render函數(shù)執(zhí)行過程中運行,useEffect是在render完畢后執(zhí)行,useLayoutEffect是在render完畢前(視圖還沒渲染到瀏覽器頁面上)執(zhí)行。 因此 useLayoutEffect總是在useEffect前執(zhí)行。 一般情況下,如果Effect中的回調(diào)函數(shù)中涉及到 DOM 視圖的改變,就應(yīng)該用 useLayoutEffect,如果沒有,則用 useEffect。

  - useRef useRef Hook是用來定義一個在組件不斷render時保持不變的變量。組件每次 render后都會返回一個虛擬DOM,組件內(nèi)對應(yīng)的變量都只屬于那個時刻的虛擬 DOM。useRef Hook就提供了創(chuàng)建貫穿整個虛擬DOM更新歷史的屬于這個組件的局部的全局變量。為了確保每次render后使用useRef獲得的變量都能是之前的同一個變量,只能使用引用做到,因此,useRef 就將這個局部的全局變量的值存儲到了一個對象中,屬性名為:current useRef的current變化時不會自動render useRef可以將創(chuàng)建的 Refs對象通過ref屬性的方式引用到DOM節(jié)點或者React實例。

  - useCallback是將某個函數(shù)“放入到react底層原型鏈上,并返回該函數(shù)的索引”,而useMemo是將某個函數(shù)返回值“放入到react底層原型鏈上,并返回該返回值的索引”。一個是針對函數(shù),一個是針對函數(shù)返回值。

  - useImperativeHandle: useImperativeHandle可以讓父組件獲取并執(zhí)行子組件內(nèi)某些自定義函數(shù)(方法)。本質(zhì)上其實是子組件將自己內(nèi)部的函數(shù)(方法)通過useImperativeHandle添加到父組件中useRef定義的對象中。

  - useMemo useMemo可以將某些函數(shù)的計算結(jié)果(返回值)掛載到react底層原型鏈上,并返回該函數(shù)返回值的索引。

  當(dāng)組件重新渲染時,如果useMemo依賴的數(shù)據(jù)變量未發(fā)生變化,那么直接使用原型鏈上保存的該函數(shù)計算結(jié)果,跳過本次無意義的重新計算,達(dá)到提高組件性能的目的。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
前端JavaScript面試題——js時間戳轉(zhuǎn)換時間的方法

小伙伴們!今天我們要來聊聊前端JavaScript的一個面試題,那就是如何把時間戳轉(zhuǎn)換成普通的時間格式呢?這個問題可是前端面試中的??团?別擔(dān)心,...詳情>>

2023-08-04 08:59:00
Html5面試題之網(wǎng)絡(luò)中使用最多的圖片格式有哪些?

在網(wǎng)絡(luò)中使用最多的圖片格式主要有JPEG、PNG和GIF。下面我將為你詳細(xì)介紹這三種圖片格式。JPEG(JointPhotographicExpertsGroup):JPEG是一種廣...詳情>>

2023-07-19 15:56:35
解釋一下什么是跨域請求?

答案:跨域請求是指在瀏覽器中,通過JavaScript在一個域名下發(fā)起對另一個域名的請求。由于瀏覽器的同源策略(Same-OriginPolicy)限制,跨域請求...詳情>>

2023-07-18 14:04:00
瀏覽器的同源策略機制

所以我們可以將請求發(fā)送到自己服務(wù)器,然后自己服務(wù)器去請求目標(biāo)接口資源,最后自己服務(wù)器將接口資源返回給當(dāng)前頁面,類似于找外援代替自己請求...詳情>>

2022-08-23 17:45:21
闡述一下http1.0與http2.0的區(qū)別,及http和https區(qū)別

HTTP2.0和HTTP1.X相比的新特性 - 新的二進(jìn)制格式(Binary Format),HTTP1.x的解析是基于文本,基于文本協(xié)議的格式解析存在天然缺陷,文本的表...詳情>>

2022-08-23 17:45:15
快速通道