用CodeBuddy开发React Todo组件
原创
用CodeBuddy开发React Todo组件
原创
友友们，早上好。今天正式开启AI工具实战系列。我将分享最近几个月使用ai工具用于工作的那些事。既是一次知识的分享，又是一次自我的一次总结，也希望自己的一些使用经验可以帮助到大家。下面正文开始。
一、协作背景与目标
在某个项目管理系统的开发中，我需要快速实现一个核心功能模块——待办事项(Todo)组件。该组件需满足以下基础功能：
- 通过输入框新增待办事项
- 勾选复选框标记完成状态
- 点击删除按钮移除待办项
- 使用Tailwind CSS实现响应式样式
项目技术栈要求为React 18 + TypeScript，且需在2小时内完成基础功能开发。考虑到时间压力，我采用CodeBuddy作为AI辅助开发工具。替我完成部分工作内容。
二、AI协作开发流程
1. 需求输入与初始代码生成
我向CodeBuddy输入了精确的需求描述：
基于React 18和TypeScript开发Todo组件，包含：
- 输入框新增待办
- 勾选标记完成
- 删除按钮删除待办
- 使用Tailwind CSS样式
- 组件需包含完整的TypeScript类型定义
然后CodeBuddy在30秒内生成了完整的组件框架，核心代码结构如下：
import React, { useState } from 'react';
interface Todo {
id: number;
text: string;
completed: boolean;
}
const TodoApp: React.FC = () => {
const [todos, setTodos] = useState<Todo[]>([]);
const [inputValue, setInputValue] = useState('');
const handleAddTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue('');
}
};
const handleToggleComplete = (id: number) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
const handleDeleteTodo = (id: number) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div className="max-w-md mx-auto p-4">
<div className="flex gap-2 mb-4">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
className="flex-1 p-2 border rounded"
placeholder="输入待办事项"
/>
<button
onClick={handleAddTodo}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
添加
</button>
</div>
<ul className="space-y-2">
{todos.map(todo => (
<li key={todo.id} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
<input
type="checkbox"
checked={todo.completed}
onChange={() => handleToggleComplete(todo.id)}
className="w-5 h-5"
/>
<span className={todo.completed ? 'line-through text-gray-400' : ''}>
{todo.text}
</span>
<button
onClick={() => handleDeleteTodo(todo.id)}
className="ml-auto text-red-500 hover:text-red-700"
>
删除
</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;2. 防抖功能优化
在初步测试中发现，连续快速输入时会导致频繁的状态更新。我向CodeBuddy补充需求：
为输入框添加1000ms防抖，避免频繁触发状态更新，使用lodash的debounce方法
CodeBuddy给出建议的优化方案：
import { debounce } from 'lodash';
// 在组件内部添加
const debouncedAddTodo = debounce(() => {
if (inputValue.trim()) {
setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue('');
}
}, 1000);
// 修改handleAddTodo方法
const handleAddTodo = () => {
debouncedAddTodo();
};
// 不要忘记在组件卸载时取消防抖
useEffect(() => {
return () => {
debouncedAddTodo.cancel();
};
}, []);后来我考虑到lodash的引入会增加包体积，我进一步要求：
不使用lodash，用原生JavaScript实现防抖
CodeBuddy按照我的需要。最终实现的防抖逻辑：
const TodoApp: React.FC = () => {
// ...其他状态
const [isComposing, setIsComposing] = useState(false);
const debounceAddTodo = () => {
let timer: NodeJS.Timeout;
return () => {
if (!isComposing) {
clearTimeout(timer);
timer = setTimeout(() => {
if (inputValue.trim()) {
setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue('');
}
}, 1000);
}
};
};
const [delayedAddTodo] = useState(() => debounceAddTodo());
// 修改后的handleAddTodo
const handleAddTodo = () => {
delayedAddTodo();
};
// 处理中文输入法组合状态
const handleCompositionStart = () => setIsComposing(true);
const handleCompositionEnd = () => setIsComposing(false);
return (
// ...其他JSX
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
// ...其他属性
/>
);
};3. 样式问题修复
测试时发现勾选完成后样式变化不明显，我向CodeBuddy提问：
如何通过Tailwind CSS实现勾选后文字变灰并加删除线，同时添加平滑过渡效果？
很快啊，我就获得优化方案：
// 修改span的className
<span className={`${
todo.completed
? 'line-through text-gray-400 transition-colors duration-200'
: 'transition-colors duration-200'
}`}>
{todo.text}
</span>三、最终实现效果
经过多轮优化后，我让ai整体实现了下面的功能：
- 响应式布局（适配移动端和桌面端）
- 输入防抖（1000ms延迟）
- 状态过渡动画，样式优化
四、总结与注意事项
个人使用后，感觉合理使用AI工具可以将前端组件开发效率提升至少50%，但我们还是需具备扎实的基础知识来验证和优化AI生成的代码。比如注意：需要人工验证AI生成的防抖逻辑是否包含清理机制；复杂状态管理建议分步实现；样式类名需要检查Tailwind版本兼容性。关于组件后续优化方向，我可能还会添加本地存储功能，实现拖拽排序，增加分类筛选功能这些。当然这些后续也会借助ai来给我完成部分工作内容。这篇就先分享到这里，我们下期见。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
