项目结构拆分
graph TD
待办事项主组件 --> 输入提交新的待办事项
待办事项主组件 --> 待办事项列表 --> 显示单个事项组件
创建项目
npx create-react-app 项目名字
cd 项目名字
npm start
文件结构
src/
├── components/
│ ├── TodoApp.js
│ ├── TodoList.js
│ ├── TodoItem.js
│ └── TodoInput.js
└── App.js
└── App.css
输入提交待办事项
功能分析:
- 维护待办事项列表状态
todos。 - 维护当前正在编辑的待办事项的索引
editingIndex。 - 包含了新增、编辑和删除待办事项的逻辑。
- 渲染待办事项的输入框和列表。
-
todos是存储所有待办事项的数组，使用useState进行状态管理。 -
editingIndex用于跟踪当前正在编辑的待办事项索引，null表示没有编辑状态。
事件处理
新增与编辑
-
如果
editingIndex是null，表示新增待办事项，将新的待办事项添加到todos中。 -
如果
editingIndex不为null，表示编辑待办事项，根据索引更新相应的待办事项文本。
设置待办事项的编辑状态
将 editingIndex 设为要编辑的索引
删除
显示待办事项的单个组件
功能分析:
接收四个 props：todo、index、onEdit、onDelete。
todo是当前待办事项的对象（包含text属性）。index是当前待办事项的索引。onEdit是点击编辑按钮时触发的回调函数。onDelete是点击删除按钮时触发的回调函数。
编辑按钮：点击后调用 onEdit，并传递当前待办事项的索引。
删除按钮：点击后调用 onDelete，删除当前索引的待办事项。
显示待办事项列表
功能分析:
接收三个 props：todos、onEdit 和 onDelete。
todos是包含所有待办事项的数组。onEdit和onDelete是父组件传递的回调函数，用于编辑和删除待办事项。
通过 todos.map 迭代待办事项数组，为每个待办事项渲染一个 TodoItem 组件。
传递 todo、index、onEdit、onDelete 给每个 TodoItem，使其能够控制自身的编辑和删除功能。
运行
npm start
代码优化
原始版本编写完进行测试，代码出现以下问题：
- 文本溢出组件
- 文本溢出导致按钮也溢出
- 修改文本溢出后按钮形式改变
首先，要把这两块分成两个部分，确保两个分离，然后保留按钮大小，文本内容根据剩余大小进行分布
1.flex布局
2.justify-content: space-between将文本与按钮左右分布
3.文本样式flex-grow: 1;，文本占据剩余空间
4.允许换行，以及允许长单词换行
5.text-align: left; display: block;确保换行后文本左对齐，强制文本块级显示，使左对齐样式生效。
6.要确保组件分布的宽度足够，并且还有最大宽度的设置
7.文本内容的最大宽度要计算max-width: calc(100% - 130px);，不能影响按钮分布
总结
React 状态管理
useState：使用 useState Hook 来管理待办事项的列表、输入框的内容等状态。当用户添加、删除或编辑待办事项时，React 会根据 state 自动更新 UI。
事件处理
事件绑定：React 的事件处理与 DOM 的事件处理非常相似。通过在元素上添加事件监听器（如 onClick），可以将用户的操作（如点击按钮）与相应的函数绑定。
样式和用户体验
样式方面，应用了现代的设计风格，如使用渐变背景、圆角按钮、悬停效果等。按钮的状态（如悬停时的颜色变化）也通过 CSS 的 transition 实现了平滑过渡。
使用盒阴影（box-shadow）和边框（border）增加元素的层次感和交互效果，使页面看起来更具视觉吸引力。
调试和优化
开发环境下的调试：可以在浏览器开发者工具中查看 console.log 输出，检查组件的状态变化和事件处理是否正常工作。
性能优化：对于较大的待办事项列表，可以使用 React.memo 或 useCallback 来优化渲染性能，避免不必要的组件重新渲染。
