【免費(fèi)下載鏈接】react-ui-treeReact tree component with drag drop項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-ui-tree點(diǎn)擊查看免費(fèi)下載react-ui-tree 是一款支持拖拽排序drag drop的 React 樹(shù)形組件它的內(nèi)部數(shù)據(jù)完全建立在 js-tree 這個(gè)輕量級(jí)樹(shù)形數(shù)據(jù)結(jié)構(gòu)庫(kù)之上。本文帶你深入 react-ui-tree 源碼徹底搞懂它的數(shù)據(jù)結(jié)構(gòu)內(nèi)幕以及 move、getIndex、updateNodesPosition 三大核心方法的工作原理——讀完這篇指南你就能明白一次拖拽操作在底層究竟發(fā)生了什么。 react-ui-tree 是什么react-ui-tree 最初是為一個(gè)網(wǎng)頁(yè)構(gòu)建器webpage builder開(kāi)發(fā)的組件核心特點(diǎn)只有兩個(gè)樹(shù)形展示 拖拽排序。它不依賴(lài) HTML5 原生拖拽 API而是用鼠標(biāo)坐標(biāo)自己算出了節(jié)點(diǎn)該移到哪里。安裝非常簡(jiǎn)單npm install react-ui-tree --save使用時(shí)只需要傳入一個(gè)普通 JS 對(duì)象作為樹(shù)數(shù)據(jù)并通過(guò)renderNode自定義每個(gè)節(jié)點(diǎn)的展示。一個(gè)最簡(jiǎn)示例可參考 example/app.js數(shù)據(jù)格式可以看 example/tree.js{ module: react-ui-tree, children: [ { module: dist, collapsed: true, children: [{ module: node.js }] } ] } 注意children、collapsed、leaf三個(gè)屬性名是組件內(nèi)置的固定約定不要改成別的名字。 js-tree 樹(shù)形數(shù)據(jù)結(jié)構(gòu)內(nèi)幕react-ui-tree 在初始化時(shí)會(huì)把你傳入的樹(shù)對(duì)象交給 js-tree 的Tree構(gòu)造函數(shù)這一步發(fā)生在 lib/react-ui-tree.js 的init方法中。js-tree 在背后做了一件非常巧妙的事它把**嵌套的樹(shù)形對(duì)象拍平**成一張id → 索引對(duì)象的映射表內(nèi)部叫indexes。每個(gè)節(jié)點(diǎn)都會(huì)被分配一個(gè)自增 id根節(jié)點(diǎn)永遠(yuǎn)是 id 1對(duì)應(yīng)一個(gè)這樣的索引對(duì)象字段含義id節(jié)點(diǎn)唯一編號(hào)根節(jié)點(diǎn)為 1node你傳入的原始數(shù)據(jù)對(duì)象parent父節(jié)點(diǎn) idchildren子節(jié)點(diǎn) id 數(shù)組prev/next前一個(gè) / 后一個(gè)兄弟節(jié)點(diǎn) idtop/left節(jié)點(diǎn)在可視化列表中的行坐標(biāo) / 列坐標(biāo)后面詳講height該子樹(shù)展開(kāi)后占用的行數(shù)這種平鋪索引表 原始對(duì)象分離的設(shè)計(jì)讓查找、移動(dòng)任意節(jié)點(diǎn)都不需要遞歸遍歷整棵樹(shù)為三大核心方法的高效運(yùn)行打下了基礎(chǔ)。 方法一getIndex(id)——O(1) 定位任意節(jié)點(diǎn)getIndex是 js-tree 提供的基礎(chǔ)方法作用是根據(jù)節(jié)點(diǎn) id 直接取回它的索引對(duì)象時(shí)間復(fù)雜度 O(1)。react-ui-tree 中幾乎處處都是它的身影渲染時(shí)lib/node.js 用tree.getIndex(child)把子節(jié)點(diǎn) id 換成索引對(duì)象再遞歸渲染拖拽時(shí)lib/react-ui-tree.js 一上來(lái)就用tree.getIndex(dragging.id)拿到被拖節(jié)點(diǎn)的top、left、parent、next等信息作為后續(xù)所有方向判斷的基準(zhǔn)。一句話理解getIndex是整棵樹(shù)的地址簿任何操作的第一步都是查地址。?? 方法二move(fromId, toId, placement)——拖拽排序的核心引擎move是 react-ui-tree 在 js-tree 之上擴(kuò)展的方法定義在 lib/tree.js。它只接受三個(gè)參數(shù)卻完成了拖拽排序的全部數(shù)據(jù)工作先摘除把fromId節(jié)點(diǎn)從原位置 remove 掉再插入按placement參數(shù)把它插到toId節(jié)點(diǎn)指定位置重算坐標(biāo)調(diào)用updateNodesPosition()刷新全樹(shù)布局返回新索引返回插入后的索引對(duì)象供 UI 層繼續(xù)追蹤。四種placement值對(duì)應(yīng)的語(yǔ)義是拖拽體驗(yàn)的關(guān)鍵placement含義拖拽中的觸發(fā)場(chǎng)景before插到目標(biāo)節(jié)點(diǎn)前面成為同級(jí)向上拖動(dòng)after插到目標(biāo)節(jié)點(diǎn)后面成為同級(jí)向下 / 向左拖動(dòng)prepend作為目標(biāo)節(jié)點(diǎn)第一個(gè)子節(jié)點(diǎn)向下拖進(jìn)有展開(kāi)子節(jié)點(diǎn)的節(jié)點(diǎn)append作為目標(biāo)節(jié)點(diǎn)最后一個(gè)子節(jié)點(diǎn)向右拖進(jìn)可展開(kāi)的兄弟節(jié)點(diǎn)源碼中還有一行貼心的防御代碼fromId toId || toId 1時(shí)直接返回——不允許把節(jié)點(diǎn)拖到根節(jié)點(diǎn)位置上避免樹(shù)結(jié)構(gòu)被破壞。那么向上就 before、向右就 append的判斷是哪來(lái)的答案在 lib/react-ui-tree.js 的drag方法里每次鼠標(biāo)移動(dòng)都會(huì)計(jì)算拖拽節(jié)點(diǎn)與自身原始坐標(biāo)的偏移量diffX/diffYdiffY 0往上拖用getNodeByTop(index.top - 1)找到上方那個(gè)節(jié)點(diǎn)執(zhí)行move(..., before)diffY 節(jié)點(diǎn)高度往下拖若下方兄弟展開(kāi)且有子節(jié)點(diǎn)就prepend進(jìn)去否則afterdiffX 0往左拖且自己是最后一個(gè)子節(jié)點(diǎn)move到父節(jié)點(diǎn)層級(jí)placement為afterdiffX paddingLeft往右拖且前一個(gè)兄弟可展開(kāi)move進(jìn)去placement為append。 這就是為什么 react-ui-tree 的拖拽能跨層級(jí)移動(dòng)節(jié)點(diǎn)——placement同時(shí)覆蓋了同級(jí)平移和父子收編兩種操作。 方法三updateNodesPosition()——給每個(gè)節(jié)點(diǎn)計(jì)算 top/left 坐標(biāo)top和left是理解 react-ui-tree 布局與拖拽判斷的鑰匙它們由 lib/tree.js 中擴(kuò)展的updateNodesPosition方法計(jì)算邏輯是一次深度優(yōu)先遍歷left 節(jié)點(diǎn)深度縮進(jìn)層級(jí)根節(jié)點(diǎn)為 1每下一層 1top 節(jié)點(diǎn)在完全展開(kāi)的視覺(jué)列表中的行號(hào)從 1 開(kāi)始順序編號(hào)height 該子樹(shù)展開(kāi)后占多少行父節(jié)點(diǎn)按子樹(shù)高度累加折疊節(jié)點(diǎn)的特殊處理如果某節(jié)點(diǎn)collapsed為 true它的所有后代top/left會(huì)被置為null——它們雖然仍在數(shù)據(jù)里但不占視覺(jué)行這樣拖拽判斷就不會(huì)被折疊區(qū)里的節(jié)點(diǎn)干擾。官方測(cè)試tests/tree.js 給出了一個(gè)直觀例子對(duì)于這樣一棵樹(shù)root (1) ├── a (2) │ └── c (3) └── b (4)updateNodesPosition()運(yùn)行后的結(jié)果是節(jié)點(diǎn)idtopleftroot111a222c333b442top正是渲染順序1 → 2 → 3 → 4。? 三大方法如何協(xié)作一次拖拽的完整旅程把前面三節(jié)串起來(lái)一次完整的拖拽在底層是這樣運(yùn)轉(zhuǎn)的mousedown記錄節(jié)點(diǎn)初始坐標(biāo)開(kāi)始監(jiān)聽(tīng) mousemovelib/react-ui-tree.jsmousemovegetIndex查出節(jié)點(diǎn)當(dāng)前top/left→ 計(jì)算偏移 → 命中方向規(guī)則后調(diào)用move樹(shù)數(shù)據(jù)即時(shí)重排move 內(nèi)部remove 按 placement 插入 updateNodesPosition全量刷新坐標(biāo)mouseup清空拖拽狀態(tài)onChange(tree.obj)把最新的普通 JS 對(duì)象拋給外部lib/react-ui-tree.js。 關(guān)鍵設(shè)計(jì)點(diǎn)組件內(nèi)部所有操作都作用在 js-tree 的索引結(jié)構(gòu)上而對(duì)外只輸出純數(shù)據(jù)對(duì)象tree.obj。你的業(yè)務(wù)代碼完全不感知 js-tree 的存在——這正是 react-ui-tree 數(shù)據(jù)與 UI 徹底解耦 的精髓。同樣的機(jī)制也服務(wù)于折疊/展開(kāi)toggleCollapse翻轉(zhuǎn)collapsed后同樣會(huì)先跑一遍updateNodesPosition再重渲染lib/react-ui-tree.js。 相關(guān)文件索引文件作用lib/tree.js擴(kuò)展 js-treemove、updateNodesPosition、getNodeByToplib/react-ui-tree.jsReact 主組件拖拽手勢(shì)識(shí)別與狀態(tài)管理lib/node.js遞歸渲染單個(gè)節(jié)點(diǎn)及其子樹(shù)lib/index.js包入口導(dǎo)出主組件tests/tree.js三大方法的單元測(cè)試與坐標(biāo)示例example/app.js可運(yùn)行的完整示例example/tree.js示例樹(shù)數(shù)據(jù)小結(jié)react-ui-tree 的底層哲學(xué)可以濃縮成三句話js-tree 把樹(shù)拍平成索引表讓任意節(jié)點(diǎn)都能 O(1) 定位getIndex 負(fù)責(zé)查地址move 負(fù)責(zé)搬家before / after / prepend / append 四種姿態(tài)updateNodesPosition 負(fù)責(zé)重排坐標(biāo)用top/left同時(shí)服務(wù)渲染順序和拖拽方向判斷。理解了這三者你就掌握了 react-ui-tree 拖拽排序的全部秘密——下次當(dāng)你把節(jié)點(diǎn)從深層拽到另一支樹(shù)冠下時(shí)底層的這場(chǎng)精密協(xié)作便盡在掌握。贊分享【免費(fèi)下載鏈接】react-ui-treeReact tree component with drag drop項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-ui-tree點(diǎn)擊查看免費(fèi)下載相關(guān)推薦探索強(qiáng)大的PHP樹(shù)形數(shù)據(jù)結(jié)構(gòu)庫(kù) - Tree探索強(qiáng)大的PHP樹(shù)形數(shù)據(jù)結(jié)構(gòu)庫(kù) Tree 在軟件開(kāi)發(fā)中處理層次結(jié)構(gòu)或樹(shù)狀數(shù)據(jù)結(jié)構(gòu)是常見(jiàn)的需求。對(duì)于PHP開(kāi)發(fā)者來(lái)說(shuō)有一個(gè)名為 Tree 的開(kāi)源庫(kù)它提供了簡(jiǎn)開(kāi)發(fā)工具終極React底層揭秘Under-the-hood-ReactJS圖解三大核心機(jī)制終極React底層揭秘Under the hood ReactJS圖解三大核心機(jī)制 Under the hood ReactJS是一個(gè)通過(guò)可視化流程圖解全面解教程前端文檔揭秘Git diff-tree樹(shù)對(duì)象差異比較的核心算法揭秘Git diff tree樹(shù)對(duì)象差異比較的核心算法 你是否曾好奇Git如何高效比較兩個(gè)版本間的文件差異當(dāng)你執(zhí)行 git diff 命令時(shí)背后究竟發(fā)生了版本控制CLI開(kāi)發(fā)工具上一篇抖音批量下載工具 douyin-downloader 實(shí)測(cè)去水印、作者主頁(yè)全量備份、直播錄制一條命令全搞定下一篇抖音下載工具douyin-downloader保姆級(jí)上手教程去水印、批量下載、直播錄制一站搞定附避坑清單創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考