免費AI編程助手
相信程序員朋友們都遇到過這個問題：項目的演進過程中，代碼往往會不斷堆砌，如果缺乏對代碼質量的關注，它會不可避免地走向混亂，逐漸演變成邏輯復雜、難以維護的“祖?zhèn)鞔a”，想優(yōu)化它但無從下手~
豆包 MarsCode AI 編程云課堂 「進階開發(fā)實戰(zhàn)系列」特邀【字節(jié)資深前端姚路行老師】為大家?guī)?strong>代碼重構實戰(zhàn)課程，幫助大家提升代碼質量，提升項目可維護性，讓開發(fā)過程更加輕松高效~
課前準備
下載并安裝豆包 MarsCode
在官網(wǎng)下載并安裝好豆包MarsCode 插件：
克隆項目
本課程使用 AI 以 Next.js 框架生成的一個 todolist 項目
git clone https://github.com/ylx911229/todo-list_back.git
使用“code”命令來啟動 Visual Studio Code 并將其打開
cd todo-list_back
code .
安裝依賴
npm i啟動項目
npm run dev- 項目依賴 Node.js 版本大于18.18.0，啟動前確認好本地 Node.js 版本，版本過低可在 Node.js 官網(wǎng)下載安裝
本地預覽
打開瀏覽器，訪問：http://localhost:3000，運行成功得到如下效果
課程內容
組件拆分
首先我們先讓豆包 MarsCode 幫我們創(chuàng)建一個 components 目錄，用于存放拆分出的組件，豆包 MarsCode 還貼心的告訴我們需要改 tailwind.config.ts 添加 components 目錄，Tailwind CSS 就會掃描目錄下的文件，以便應用相應的樣式。
Workspace在app目錄下創(chuàng)建components目錄
接下來讓豆包MarsCode 幫我們將項目合理拆分組件
如果由于輸出 token 長度限制，拆分的組件沒有輸出完全的話，可以讓豆包MarsCode 繼續(xù)輸出
Workspace 拆分出的組件沒有輸出完成，請繼續(xù)輸出
最后修改主文件，將主文件改寫成對子組件的引入
Workspace 將主文件改寫成對子組件的引入
資源抽離
類型聲明的抽離，單獨文件管理類型更清晰可讀，另外，項目當中也會有很多可以多組件，多文件復用的常量，抽離出來統(tǒng)一管理，一處修改，多處受益
類型聲明抽離
首先將主文件中的類型聲明單獨抽離一個文件
Workspace 將主文件中的類型聲明單獨抽離一個文件
接下來修改項目中所有文件對類型聲明的引入方式以及引入路徑
Workspace 修改項目中所有文件對類型聲明的引入方式以及引入路徑
常量抽離
單獨抽離項目中的常量，并修改項目中所有文件對常量的引入方式以及引入路徑（輸出簡單的話，也可以在一條指令中引導豆包MarsCode 完成）
Workspace 將項目中的常量單獨抽離一個文件，并修改項目中所有文件對常量的引入方式以及引入路徑
狀態(tài)管理優(yōu)化
當項目中一個組件內管理過多的狀態(tài)時，代碼會非常亂，并且可讀性很差，我們可以根據(jù)狀態(tài)的不同類型，去抽離獨立的自定義 hooks ，讓代碼更加可讀可維護，而當狀態(tài)管理需要組件層層傳遞時，更好的做法就是將狀態(tài)管理提升為全局狀態(tài)管理，兩種都是對狀態(tài)管理的優(yōu)化，選擇更適合自己項目的方式
自定義hooks
將兩個狀態(tài)管理作為自定義 hooks 單獨抽離，并改寫主文件對他們的引入
Workspace 將從localStorage加載todos和保存todos到localStorage做為useLoadTodosFromLocalStorage和useSaveTodosFromLocalStorage兩個自定義hooks單獨抽離，并改寫主文件對他們的引入
全局狀態(tài)管理
將項目中的狀態(tài)管理改為全局狀態(tài)管理,主文件以及所有組件通過全局狀態(tài)獲取而不是通過 props 傳遞
Workspace 將項目中的狀態(tài)管理改為全局狀態(tài)管理，主文件以及所有組件通過全局狀態(tài)獲取而不是通過props傳遞
代碼提交
最后我們提交代碼時，可以讓豆包MarsCode 幫我們總結一下改動，給一個合適的commit message
在本次課程中，我們了解到合理重構代碼的思路，以及如何通過豆包 MarsCode 一步步對已有代碼進行重構，最終完成項目的代碼重構。相信聽完課的你都能有所收獲并嘗試付諸實踐，提高自己的代碼質量以及開發(fā)效率。
點擊??【豆包 MarsCode 官網(wǎng)】立即體驗 AI 編程吧~
