国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

面試題:react、 vue中的key有什么作用? （key的內(nèi)部原理)

2年前作者：小倉鼠真的好可愛吖分類：Toy博客閱讀(30)違法舉報

這篇具有很好參考價值的文章主要介紹了面試題:react、 vue中的key有什么作用? （key的內(nèi)部原理)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

面試題:react、 vue中的key有什么作用? （key的內(nèi)部原理)

面試題:react、 vue中的key有什么作用? （key的內(nèi)部原理)

1.虛擬DOM中key的作用:

key是虛擬DOM對象的標識，當狀態(tài)中的數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)【新數(shù)據(jù)】生成【新的虛擬DON】,隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下:

2.對比規(guī)則:

(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:

.若虛擬DOM中內(nèi)容沒變,直接使用之前的真實DOM !
.若虛擬DON中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM.

(2).舊虛擬DOM中未找到與新虛擬DOM相同的key

創(chuàng)建新的真實DOM,隨后渲染到到頁面。

3．用index作為key可能會引發(fā)的問題:

1.若對數(shù)據(jù)進行:逆序添加、逆序刪除等破壞順序操作:會產(chǎn)生沒有必要的真實DOM更新==>界面效果沒問題,但效率低。

2．如果結(jié)構(gòu)中還包含輸入類的DOM:會產(chǎn)生錯誤DOM更新==>界面有問題。

4．開發(fā)中如何選擇key? :

1.最好使用每條數(shù)據(jù)的唯一標識作為key，比如id、手機號、身份證號、學(xué)號等唯一值。
2.如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示,使用index作為key是沒有問題的。文章來源地址http://www.zghlxwxcb.cn/news/detail-444021.html

到了這里，關(guān)于面試題:react、 vue中的key有什么作用? （key的內(nèi)部原理)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

面試題-React(二)：React中的虛擬DOM是什么？
一、什么是虛擬DOM？虛擬DOM是React的核心概念之一，它是一個輕量級的JavaScript對象樹，用于表示真實DOM的狀態(tài)。在React中，當數(shù)據(jù)發(fā)生變化時，首先會在虛擬DOM上執(zhí)行DOM更新，而不是直接操作真實DOM。然后，通過比較前后兩個虛擬DOM的差異，最小化真實DOM的操作，從而減少頁
2024年02月12日
瀏覽(24)
Vue中的$nextTick有什么作用？
官方對其的定義在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM 什么意思呢？我們可以理解成， Vue ?在更新? DOM ?時是異步執(zhí)行的。當數(shù)據(jù)發(fā)生變化， Vue 將開啟一個異步更新隊列，視圖需要等隊列中所有數(shù)據(jù)變化完成之后
2024年02月22日
瀏覽(22)
React、Vue框架如何實現(xiàn)組件更新，原理是什么？
原文合集地址如下，有需要的朋友可以關(guān)注本文地址合集地址 React 和 Vue 都是當今最流行的前端框架,它們都實現(xiàn)了組件化開發(fā)模式。為了優(yōu)化性能,兩者都采用了虛擬DOM技術(shù)。當組件狀態(tài)發(fā)生改變時,它們會使用虛擬DOM進行局部渲染比對,只更新必要的DOM節(jié)點,從而避免重新渲染
2024年02月17日
瀏覽(19)
React和Vue 中的 router 實現(xiàn)原理如何
React 和 Vue 中的路由器（Router）實現(xiàn)原理類似，都是基于監(jiān)聽 URL 變化，然后根據(jù)不同的 URL 加載相應(yīng)的組件或頁面。下面是它們的一般實現(xiàn)原理： React Router?實現(xiàn)原理： History API： ?React Router 使用 HTML5 History API（pushState() 和 replaceState() 方法）來操作瀏覽器的歷史記錄，從而
2024年02月20日
瀏覽(32)
C語言常見面試題：什么是宏，宏的作用是什么？
宏在計算機科學(xué)中是一種批量處理程序命令，它是一種抽象的規(guī)則或模式，用于說明某一特定輸入（通常是字符串）如何根據(jù)預(yù)定義的規(guī)則轉(zhuǎn)換成對應(yīng)的輸出（通常也是字符串）。在編譯時，預(yù)處理器會對宏進行展開，即將宏的內(nèi)容替換到宏所在的位置。宏的作用主要有以下
2024年01月23日
瀏覽(22)
【Python 基礎(chǔ)】輸入兩個數(shù)，求它們的求最大公約數(shù)（偽碼描述 + Python實現(xiàn)）| 區(qū)塊鏈面試題：區(qū)塊鏈技術(shù)中的“閃電網(wǎng)絡(luò)”是什么？有什么作用？
? “這樣的年代沒有誰是值得信任的，你只能靠自己?！?? ? ??作者主頁：追光者♂?? ???????? ??個人簡介： ? ??[1] 計算機專業(yè)碩士研究生?? ? ??[2] 2023年城市之星領(lǐng)跑者TOP1(哈爾濱)?? ? ??[3] 2022年度博客之星人工智能領(lǐng)域TOP4?? ? ??[4] 阿里云社區(qū)特邀專家博
2024年02月01日
瀏覽(25)
【JavaSE】什么是抽象類？什么是內(nèi)部類？以及它們的作用是什么？
?這篇文章我們主要學(xué)習(xí)的是兩個知識點，可以來解決文章標題所提出來的三個問題。 ? 目錄 1.抽象類 1.1 抽象類概念 1.2 抽象類語法 1.3 抽象類特性 1.4 抽象類的作用 2.內(nèi)部類 2.1 內(nèi)部類的分類 2.2 實例內(nèi)部類 2.3 靜態(tài)內(nèi)部類 2.4 匿名內(nèi)部類 2.5 局部內(nèi)部類在多態(tài)的學(xué)習(xí)中，我們
2024年02月14日
瀏覽(28)
【Python & 機器學(xué)習(xí) 基礎(chǔ)】繪制 sigmoid 函數(shù)曲線 | exp：以e為底的指數(shù)函數(shù)（科普向）| 區(qū)塊鏈面試題：區(qū)塊鏈技術(shù)中的“區(qū)塊鏈瀏覽器”是什么？有什么作用？
? “誰都了解生存往往比命運還殘酷，只是沒人愿意認輸，我們都在不斷趕路，忘記了出路?！?? ? ??作者主頁：追光者♂?? ???????? ??個人簡介： ? ??[1] 計算機專業(yè)碩士研究生?? ? ??[2] 2023年城市之星領(lǐng)跑者TOP1(哈爾濱)?? ? ??[3] 2022年度博客之星人工智能領(lǐng)域
2024年02月06日
瀏覽(26)
Vue.js 中的響應(yīng)式原理是什么？
Vue.js 是一種流行的前端框架，它使用了一種稱為“響應(yīng)式”的技術(shù)來實現(xiàn)數(shù)據(jù)綁定。這意味著當數(shù)據(jù)發(fā)生變化時，Vue.js會自動更新相關(guān)的視圖，而無需手動操作DOM。在本文中，我們將深入探討Vue.js中的響應(yīng)式原理。在Vue.js中，響應(yīng)式是指當數(shù)據(jù)發(fā)生變化時，相關(guān)的視圖將自
2024年02月07日
瀏覽(24)
react中refs的作用是什么？有幾種用法？
在 React 中，ref 是用來獲取組件或 DOM 元素的引用的一種方式。ref 可以在組件掛載后被訪問，并且允許您從組件中訪問底層的 DOM 元素或組件實例。 ref 有兩種用法：字符串 ref 和回調(diào)函數(shù) ref。字符串 ref（string refs）是一種早期的使用 ref 的方式。它通過設(shè)置 ref 屬性為一個字
2024年01月20日
瀏覽(25)