react diff

react diff算法為降低算法復雜度提出了三大策略:
1.只進行同級比較
2.節點類型比較,不同元素生成不同的fiber樹
3.key作為元素的唯一標識

diff算法流程
diff算法需要進行兩輪遍歷:
第一輪遍歷更新的節點。
第二輪遍歷沒更新的節點。

第一輪:
從頭遍歷newChildren對象和老的fiber樹。如果節點key不同,則不可復用,第一輪遍歷結束。若key相同,但元素類型不同,oldfiber標記為delete,繼續遍歷。
第一輪遍歷完有四種情況:
1.newChildren 與 oldFiber 同時遍歷完
理想情況:只需在第一輪遍歷進行組件更新,diff結束
2.newChildren 沒遍歷完,oldFiber 遍歷完
本次更新有新加入的節點
3.newChildren 遍歷完,oldFiber 沒遍歷完
有節點被刪除
4.newChildren 與 oldFiber 都沒遍歷完
有節點更新了位置,通過oldfiber生成一個map,map的key為oldfiber的key,oldfiber為value。遍歷剩余的newChildren,(lastPlacedIndex 是最后一個可復用的節點在 oldFiber 中的位置索引)逐個在 map 中尋找 oldFiber 中可復用的節點,如果找到可復用的節點,則將 oldIndex 與 lastPlacedIndex 比較,如果 oldIndex 與 lastPlacedIndex 小,則該節點需要右移,將新的 Fiber 節點標記為 Placement 。否則,將 lastPlacedIndex 更新為 oldIndex 。
遍歷完新的子元素,map中還有剩余節點,則刪除。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/719739.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/719739.shtml
英文地址,請注明出處:http://en.pswp.cn/news/719739.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【LeetCode:225. 用隊列實現棧 + 棧 | 隊列】

🚀 算法題 🚀 🌲 算法刷題專欄 | 面試必備算法 | 面試高頻算法 🍀 🌲 越難的東西,越要努力堅持,因為它具有很高的價值,算法就是這樣? 🌲 作者簡介:碩風和煒,…

水牛社軟件是真的嗎?

軟件是真的,不過畢竟是為了賺錢或者獲取資源而買的,所以大部分只關心能賺多少錢吧 說實話,我用了2年了,一些獨立的項目還有群,有一月掙幾千上萬的,有一月賺幾百的 軟件是一個集合體,不是像很多…

【leetcode刷題之路】面試經典150題(5)——二叉樹+二叉樹層次遍歷+二叉搜索樹

文章目錄 9 二叉樹9.1 【遞歸】二叉樹的最大深度9.2 【遞歸】相同的樹9.3 【遞歸】翻轉二叉樹9.4 【遞歸】對稱二叉樹9.5 【遞歸】從前序與中序遍歷序列構造二叉樹9.6 【遞歸】從中序與后序遍歷序列構造二叉樹9.7 【BFS】填充每個節點的下一個右側節點指針 II9.8 【遞歸】二叉樹…

代碼隨想錄第二十七天 455.分發餅干 376.擺動序列 53.最大子序和 122.買賣股票的最佳時機II

LeetCode 455 分發餅干 題目描述 假設你是一位很棒的家長,想要給你的孩子們一些小餅干。但是,每個孩子最多只能給一塊餅干。 對每個孩子 i,都有一個胃口值 g[i],這是能讓孩子們滿足胃口的餅干的最小尺寸;并且每塊餅…

2024全國護網行動HW行動招聘/收人!!!

2024全國護網行動HW行動招聘 溯蓉信創開始收人啦!!!現在開始收錄2024HW簡歷,感興趣的小伙伴掃碼二維碼添加微信 我們簽約后,入場即預付款3k,簽約后我們會在HW之前對我們的人員進行HW培訓,保證上…

Three.js--》探尋Cannon.js構建震撼的3D物理交互體驗(一)

我們用three.js可以繪制出各種酷炫的畫面,但是當我們想要一個更加真實的物理效果的話,這個時候我們就需要一個物理的庫,接下來我們就講解一下今天要學習的canon,它可以給我們提供一個更加真實的物理效果,像物體的張力、…

YOLOv8姿態估計實戰:訓練自己的數據集

課程鏈接:https://edu.csdn.net/course/detail/39355 YOLOv8 基于先前 YOLO 版本的成功,引入了新功能和改進,進一步提升性能和靈活性。YOLOv8 同時支持目標檢測和姿態估計任務。 本課程以熊貓姿態估計為例,將手把手地教大家使用C…

Mysql實戰(2)之MySQL執行流程

-- 查看mysql當前有多少連接 show global status like Thread%; /* Threads_cached:緩存中的線程連接數 Threads_connected:當前打開的連接數 Threads_created:為處理連接創建的線程數 Threads_running:非睡眠狀態的連接數&…

windows部署mariadb-11.3

因為需要用到數據庫來處理一些東西,所以決定在windows上安裝一下MariaDB. 隨著版本升級,安裝已經不是那么復雜了.對應的.其實網上一大堆的檢索結果,很多并不可用. 由于是開發環境,這里一切從簡了. 下載安裝包.并解壓進入bin目錄,使用mysql_install_db.exe程序來進行安裝.執行 m…

MSCKF5講:后端代碼分析

MSCKF5講:后端代碼分析 文章目錄 MSCKF5講:后端代碼分析1 初始化initialize()1.1 加載參數1.2 初始化IMU連續噪聲協方差矩陣1.3 卡方檢驗1.4 接收與訂閱話題createRosIO() 2 IMU靜止初始化3 重置resetCallback()4 featureCallback4.1 IMU初始化判斷4.2 I…

【文末送書】智能計算:原理與實踐

歡迎關注博主 Mindtechnist 或加入【智能科技社區】一起學習和分享Linux、C、C、Python、Matlab,機器人運動控制、多機器人協作,智能優化算法,濾波估計、多傳感器信息融合,機器學習,人工智能等相關領域的知識和技術。關…

Linux系統運維腳本:一鍵添加防火墻規則(開啟服務和網絡端口)

目 錄 一、要求 二、解決方案 (一)解決思路 (二)方案 三、腳本程序實現 (一)腳本代碼和解釋 1、腳本代碼 2、代碼解釋 (二)腳本驗證 1、腳本編輯 2、給予執行權限…

NumPy數據處理詳解的筆記2

NumPy數據處理詳解的筆記2 第1章NumPy基礎 NumPy是用于處理多維數組的數值運算庫,不僅可用于 機器學習,還可以用于圖像處理,語言處理等任務。 1.2 多維數據結構ndarray的基礎 在學習NumPy的過程中,只要理解了ndarray的相關知識…

java 關于 Object 類中的 wait 和 notify 方法。(生產者和消費者模式!)

4、關于 Object 類中的 wait 和 notify 方法。(生產者和消費者模式!) 第一:wait 和 notify 方法不是線程對象的方法,是 java 中任何一個 java 對象都有的方法,因為這兩個方法是 Object 類中自帶的。 wait 方…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停車位檢測系統(Python+PySide6界面+訓練代碼)

摘要:開發停車位檢測系統對于優化停車資源管理和提升用戶體驗至關重要。本篇博客詳細介紹了如何利用深度學習構建一個停車位檢測系統,并提供了完整的實現代碼。該系統基于強大的YOLOv8算法,并結合了YOLOv7、YOLOv6、YOLOv5的性能對比&#xf…

HarmonyOS端云體化開發—創建端云一體化開發工程

云開發工程模板 DevEco Studio目前提供了兩種云開發工程模板:通用云開發模板和商城模板。您可根據工程向導輕松創建端云一體化開發工程,并自動生成對應的代碼和資源模板。在創建端云一體化開發工程前,請提前了解云開發工程模板的相關信息。 …

前端學習之HTML(第一天)

什么是HTML HTML是一種用來描述網頁的一種語言&#xff0c;HTML不是一種編程語言&#xff0c;而是一種標記語言。 HTML標簽 HTML 標簽是由尖括號包圍的關鍵詞&#xff0c;比如 <html> HTML 標簽通常是成對出現的&#xff0c;比如 <b> 和 </b> 標簽對中的…

ROS 2基礎概念#3:主題(Topic)| ROS 2學習筆記

在ROS&#xff08;Robot Operating System&#xff09;中&#xff0c;主題&#xff08;Topics&#xff09;是實現節點之間通信的主要機制之一。節點&#xff08;Node&#xff09;可以發布&#xff08;publish&#xff09;消息到話題&#xff0c;或者訂閱&#xff08;subscribe&…

市場復盤總結 20240304

僅用于記錄當天的市場情況&#xff0c;用于統計交易策略的適用情況&#xff0c;以便程序回測 短線核心&#xff1a;不參與任何級別的調整&#xff0c;采用龍空龍模式 一支股票 10%的時候可以操作&#xff0c; 90%的時間適合空倉等待 二進三&#xff1a; 進級率中 20% 最常用的…

格兩例12345

osu/Lucky Roll gaming 周末osu有道題&#xff1a;lcg已知低位 def lcg(s, a, b, p):return (a * s b) % pp getPrime(floor(72.7)) a randrange(0, p) b randrange(0, p) seed randrange(0, p) print(f"{p }") print(f"{a }") print(f"{b …