用 flex 佈局和 React Hooks 實現一個思惟導圖

學習 React 時作的練手項目，基於純 Hooks 和 flex 佈局實現的思惟導圖。

項目地址：RMind，喜歡的話還請點個 star，謝謝啦～ 😉

在線演示：RMind Demo

介紹

Hooks

全部組件都是函數組件，由 Hook 實現事件、狀態等的管理。除了 useState、useEffect 等基本操做外，還實現了：

• 利用 useReducer 和 useContext 的結合，代替 Redux 進行全局狀態管理。
• 將一些重複的 Hook 操做，合併爲自定義 Hook 以複用。

flex

項目中第一個實現的功能是思惟導圖的繪製，當時圖省事沒有使用 canvas 或 SVG，而是將導圖節點做爲 DOM，用 CSS flex 佈局。

後來發現這樣算是給本身挖了個坑，繪製節點鏈接線時仍是繞不開 canvas，並且由於要獲取節點 DOM 的 offset 參數，反而顯得有些繁瑣。

不過正由於節點是 DOM，調用 DOM 的 api，很輕易就實現了拖拽功能。最初構想時覺得這會是項目裏的難點。

數據結構

思惟導圖數據結構使用多叉樹實現，經過 DFS 進行文件的讀寫和節點查找。

後來想過用平級結構存儲，渲染時根據每一個節點保存的子節點 ID 信息，實時構建一棵樹出來，可能效率還高一點，不過由於懶就沒再深刻研究。

優化

• 用控制檯查看流量時，發現「導出功能」的頁面耗費 60k，頂得上總加載流量的一半了。考慮到這個功能打開頻率不高，利用 React.lazy 將其封裝爲懶加載組件。

• 使用 useMemo 封裝變量，減小了一些沒必要要的渲染。

不足

一開始想的是作個基本的增刪改就行，作着作着快捷鍵加上了…主題加上了…撤銷重作加上了。context 越寫越大，帶來了一些組件的重複渲染問題。不過本地測試時還挺流暢，就先擱置不解決了😝

---

本人經驗能力有限，寫的代碼可能不夠美觀，可能藏了不少 bug（雖然本身已經抓出來了不少…）。但願各位高手能不吝賜教～

話很少說，下面放上項目簡介

RMind

RMind = React + Mindmap

基於 React Hooks 與 flex 佈局，實現了大部分功能的思惟導圖。

特色

• 徹底使用 React Hooks 開發，全部功能均由箭頭函數實現
• 用 flex 佈局完成思惟導圖排版，惟一用到 canvas 的地方是繪製節點鏈接線

支持

• 節點的增刪改等基本功能
• 拖拽操做
• 撤銷/重作
• 導入及導出 .km（百度腦圖） .md（Makrdown） .txt 格式的思惟導圖
• 將導圖保存爲圖片
• 切換主題

演示

• 拖拽操做

• 鍵盤操做

• 切換主題

操做方式

鼠標操做

• 單擊選中節點
• 雙擊編輯節點文字
• 拖拽移動節點

鍵盤操做

功能	按鍵
切換所選節點	↑/↓/←/→
添加子節點	Tab
添加兄弟節點	Enter
刪除節點	Backspace/Delete
修改節點文字	F2
切換顯示子節點	Space
撤銷	Cmd/Ctrl+Z
重作	Cmd/Ctrl+Shift+Z

編輯文字狀態下：

功能	按鍵
取消	Esc
確認	Enter

項目地址

RMind，喜歡的話還請點個 star，謝謝啦～ 😉

在線演示：RMind Demo