学习笔记：React + SCSS 实现待办事项应用

项目简介

该项目是一个简单的待办事项应用，旨在通过 React 和 SCSS 学习前端开发的基础知识与实践。主要功能包括：

1. 任务的增删查改：
   • 可以添加新的待办任务。
   • 可以修改已存在的任务内容。
   • 支持删除不需要的任务。
   • 所有任务实时展示在页面中。
2. 响应式和交互式设计：
   • 输入框和按钮设计了动态交互效果（如悬停、点击动画）。
   • 布局上支持灵活适配不同大小的屏幕。
3. 代码组织清晰，便于扩展：
   • 核心逻辑集中在一个 Todo 组件内，便于理解和修改。
   • 样式采用模块化 SCSS，简化层级关系，易于维护。

---

代码结构

1. 文件结构

• Todo.jsx：主要逻辑实现。
• index.scss：主要样式设计。

目录如下：

css复制代码src/
├── components/
│   ├── Todo.jsx
├── styles/
│   ├── index.scss

2. 功能模块

• 主组件：通过 React Hooks 实现状态管理和逻辑控制。
• 样式模块：通过 SCSS 嵌套规则实现分层样式和动态交互。

---

核心技术点

React 部分

1. 状态管理

• 通过 useState Hook 实现组件内状态的管理：
  • items：存储当前所有任务的数组。
  • newItem：表示用户正在输入的任务内容。
  • isEditing：标记当前是否处于编辑模式。
  • currentIndex：记录正在编辑的任务索引。

示例代码：

const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState("");
const [isEditing, setIsEditing] = useState(false);
const [currentIndex, setCurrentIndex] = useState(null);

2. 数据初始化

• 利用 useEffect模拟从后端加载初始数据。该生命周期方法在组件挂载时执行一次：

  useEffect(() => {
    const mockData = ["Learn React", "Build a Todo App", "Practice Coding"];
    setItems(mockData);
  }, []);
  

3. 事件处理

项目中有多个交互事件，通过函数进行处理：

• 添加任务： 根据是否处于编辑模式（isEditing），决定新增任务还是更新任务：

  const handleSubmit = (event) => {
    event.preventDefault();
    if (newItem.trim() === "") return;
  
    if (isEditing) {
      const updatedItems = [...items];
      updatedItems[currentIndex] = newItem.trim();
      setItems(updatedItems);
      setIsEditing(false);
      setCurrentIndex(null);
    } else {
      setItems([...items, newItem.trim()]);
    }
    setNewItem(""); // 清空输入框
  };
  

• 修改任务： 点击某任务的“修改”按钮后，将任务内容填充到输入框，开启编辑模式：

  const handleEdit = (index) => {
    setNewItem(items[index]);
    setIsEditing(true);
    setCurrentIndex(index);
  };
  

• 删除任务： 点击“删除”按钮后，通过 filter 方法移除选中的任务：

  const handleDelete = (index) => {
    const updatedItems = items.filter((_, i) => i !== index);
    setItems(updatedItems);
  };
  

4. 动态渲染任务

通过 map 遍历 items 数组，将任务逐个渲染到页面中。动态绑定了任务索引、内容和操作按钮：

{items.map((item, index) => (
  <div className="item" key={index}>
    <li>{item}</li>
    <button onClick={() => handleEdit(index)}>修改</button>
    <button onClick={() => handleDelete(index)}>删除</button>
  </div>
))}

---

SCSS 部分

1. 样式模块化

• 项目样式分为三大部分：main（主区域）、list（任务列表）、footer（底部输入框与按钮）。

• 使用嵌套规则（Nesting），简化样式定义：

  .main {
    .list {
      .item {
        li {
          font-size: 30px;
        }
        button {
          // 按钮样式
        }
      }
    }
  }
  

2. 按钮样式与动态效果

按钮的设计采用渐变背景、悬停动画和点击反馈效果，提升交互体验：

button {
  background: linear-gradient(45deg, #1196cb, #25a2fc);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(45deg, #256dfc, #1187cb);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  }
}

3. 表单布局

底部输入框与按钮的布局采用 Flex 居中对齐，按钮与输入框的圆角过渡实现一致的视觉体验：

.footer-form {
  display: flex;
  max-width: 600px;
}
.footer-input {
  flex: 1;
  border-radius: 5px 0 0 5px;
}
.footer-button {
  border-radius: 0 5px 5px 0;
}

---

项目总结

通过本项目学习了以下技术点：

1. React 基础知识：
   • 使用 useState 和 useEffect 管理状态和生命周期。
   • 实现动态渲染列表并绑定事件处理器。
   • 理解如何组织小型项目的逻辑结构。
2. SCSS 的高级用法：
   • 使用嵌套规则减少重复代码。
   • 借助 transition、box-shadow 等属性设计交互动画。
   • 利用 Flex 布局实现灵活的页面适配。
3. 用户交互优化：
   • 按钮的动画效果和输入框的聚焦样式，提升用户体验。
   • 增加动态编辑模式，使任务的增删改更加直观。

---

扩展方向

1. 功能扩展：
   • 添加任务分类功能（如通过标签筛选任务）。
   • 引入持久化存储（如 LocalStorage 或后端 API），让数据刷新后仍然保留。
   • 增加任务完成状态（如打勾标记）。
2. 样式优化：
   • 增加响应式设计，适配手机端页面。
   • 使用 Ant Design 等 UI 框架，统一视觉风格。
3. 项目优化：
   • 将组件拆分为更小的功能模块（如 TaskItem 子组件）。
   • 使用 TypeScript 增强类型安全性。

通过以上练习，不仅加深了对 React 和 SCSS 的理解，也对前端开发的整体流程有了更清晰的认知。