AI 编程云课堂｜教你用 AI 一小时重构代码 - 文章 - 开发者社区

picture.image

相信程序员朋友们都遇到过这个问题：项目的演进过程中，代码往往会不断堆砌，如果缺乏对代码质量的关注，它会不可避免地走向混乱，逐渐演变成逻辑复杂、难以维护的“祖传代码”，想优化它但无从下手~

关注到这一点，上期豆包MarsCode AI编程云课堂「进阶开发实战系列」特邀【字节资深前端姚路行老师】为大家带来代码重构实战课程 ，帮助大家提升代码质量，提升项目可维护性，让开发过程更加轻松高效~

大家有没有按时听课呢？让我们来看看上节课的精彩回顾吧~

课前准备

下载并安装豆包MarsCode

https://www.marscode.cn

在官网下载并安装好豆包MarsCode 插件：

picture.image

克隆项目

本课程使用 AI 以 Next.js 框架生成的一个 todolist 项目

git clone https://github.com/ylx911229/todo-list\_back.git

使用“code”命令来启动 Visual Studio Code 并将其打开

cd todo-list_back

code .

picture.image

安装依赖

npm i

启动项目

npm run dev

*项目依赖 Node.js 版本大于18.18.0，启动前确认好本地 Node.js 版本，版本过低可在 Node.js 官网下载安装

本地预览

打开浏览器，访问： http://localhost:3000，运行成功得到如下效果

picture.image

课程内容

组件拆分

首先我们先让豆包MarsCode 帮我们创建一个 components 目录，用于存放拆分出的组件，豆包MarsCode 还贴心的告诉我们需要改 tailwind.config.ts 添加 components 目录，Tailwind CSS 就会扫描目录下的文件，以便应用相应的样式。

Workspace在app目录下创建components目录

picture.image

接下来让豆包MarsCode 帮我们将项目合理拆分组件

picture.image

向右滑动查看

如果由于输出 token 长度限制，拆分的组件没有输出完全的话，可以让豆包MarsCode 继续输出

Workspace 拆分出的组件没有输出完成，请继续输出

picture.image

最后修改主文件，将主文件改写成对子组件的引入

Workspace 将主文件改写成对子组件的引入

picture.image

资源抽离

类型声明的抽离，单独文件管理类型更清晰可读，另外，项目当中也会有很多可以多组件，多文件复用的常量，抽离出来统一管理，一处修改，多处受益

类型声明抽离

首先将主文件中的类型声明单独抽离一个文件

Workspace 将主文件中的类型声明单独抽离一个文件

picture.image

接下来修改项目中所有文件对类型声明的引入方式以及引入路径

Workspace 修改项目中所有文件对类型声明的引入方式以及引入路径

picture.image

常量抽离

单独抽离项目中的常量，并修改项目中所有文件对常量的引入方式以及引入路径（输出简单的话，也可以在一条指令中引导豆包MarsCode 完成）

Workspace 将项目中的常量单独抽离一个文件，并修改项目中所有文件对常量的引入方式以及引入路径

picture.image

状态管理优化

当项目中一个组件内管理过多的状态时，代码会非常乱，并且可读性很差，我们可以根据状态的不同类型，去抽离独立的自定义 hooks ，让代码更加可读可维护，而当状态管理需要组件层层传递 时，更好的做法就是将状态管理提升为全局状态管理 ，两种都是对状态管理的优化，选择更适合自己项目的方式

自定义hooks

将两个状态管理作为自定义 hooks 单独抽离，并改写主文件对他们的引入

Workspace 将从localStorage加载todos和保存todos到localStorage做为useLoadTodosFromLocalStorage和useSaveTodosFromLocalStorage两个自定义hooks单独抽离，并改写主文件对他们的引入

picture.image