React组件化开发实战：从0到1构建TodoList应用本文通过完整TodoList项目实战，深入讲解React组件化

前言

在现代前端开发中，组件化已经成为核心思想。本文将通过一个完整的TodoList项目，带你深入理解React组件化开发的精髓。

🎯 为什么选择Vite + React？

在开始之前，让我们先理解为什么选择Vite作为我们的工程化工具：

npm create vite@latest todoListComponent -- --template react

Vite就像是前端开发中的"塔吊和搅拌机"，为大型项目提供了：

快速的开发服务器
现代化的模板代码
一键启动的开发环境

🧩 什么是组件？

组件是组合了HTML、CSS、JavaScript的开发单元。相比于细粒度的标签操作，组件更像是一个完整的"工作单位"和"功能单位"。

从DOM树编程到组件树编程

// 传统的DOM操作方式
document.getElementById('todoList').innerHTML = '<li>钓鱼</li>';

// React组件化方式
function TodoItem({ text }) {
  return <li>{text}</li>;
}

现代前端开发的核心转变：

低级的DOM树编程 → 组件树编程
HTML只是沙子 → 组件才是任务单元

📁 项目结构设计

让我们来看看一个标准的React组件化项目结构：

todoListComponent/
├── src/
│   ├── App.jsx          # 根组件
│   ├── App.css          # 全局样式
│   ├── index.css        # 基础样式
│   ├── Todo.css         # 业务样式
│   ├── main.jsx         # 应用入口
│   └── components/      # 组件目录
│       ├── TodoList.jsx # 主列表组件
│       ├── TodoForm.jsx # 表单组件
│       └── Todos.jsx    # 列表展示组件

🔧 核心组件实现

1. 应用入口 - App.jsx

import { useState } from 'react'
import './App.css'
import TodoList from './components/TodoList'

function App() {
  return (
    <>
      <div></div>
      <TodoList />
    </>
  )
}

export default App

App组件作为根组件，负责整个应用的顶层结构。

2. 主业务组件 - TodoList.jsx

import { useState } from 'react';
import '../Todo.css'
import TodoForm from './TodoForm'
import Todos from './Todos'

function TodoList(){
    // 响应式数据状态
    const [hi, setHi] = useState("wow");
    const [title, setTitle] = useState('Todo List');
    const [todos, setTodos] = useState([{
        id:1,
        text:'钓鱼',
        completed: false
    }]);

    const handleAdd = (text)=>{
        setTodos([
            ...todos,
            {
                id: todos.length + 1,
                text,
                completed: false
            }
        ]);
    }

    return(
      <div className="container">
        <h1 className="title">{title}{hi}</h1>
        <TodoForm onAdd={handleAdd} />
        <Todos todos={todos} />
      </div>
    )
}

export default TodoList;

核心特点：

使用useState管理组件状态
数据驱动界面更新
通过props传递数据和事件处理函数

3. 表单组件 - TodoForm.jsx

import { useState } from 'react';

function TodoForm(props){
    const onAdd = props.onAdd;
    const [text, setText] = useState('');
    
    const handleSubmit =(e)=>{
        e.preventDefault(); // 阻止默认提交行为
        onAdd(text);
    }
    
    const handleChange =(e)=>{
        setText(e.target.value);
    }
    
    return(
        <form action="http://www.baidu.com" onSubmit={handleSubmit}>
            <input 
                type="text" 
                placeholder="请输入代办事项" 
                value={text}
                onChange={handleChange}
            />
            <button>添加</button>
        </form>
    )
}

export default TodoForm;

表单组件职责：

管理输入框的状态
处理表单提交事件
向父组件传递新增的待办事项

4. 列表展示组件 - Todos.jsx

function Todos(props){
    console.log(props,'/////');
    const todos = props.todos;
    
    return(
        <ul>
            {
                todos.map(todo =>(
                    <li key={todo.id}>{todo.text}</li>
                ))
            }
        </ul>
    )
}

export default Todos;

🎨 样式管理

全局样式 - index.css

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

业务样式 - Todo.css

li{
    color: red;
}

最终成果展示：

🚀 React界面开发的核心理念

1. 数据驱动

// 数据状态改变 → 界面自动更新
const [todos, setTodos] = useState([]);

2. 组件化思维

会写组件 - 理解组件的基本结构
会拆分组件 - 按照功能和职责划分
会管理状态 - 使用useState等Hook管理数据

3. 响应式数据状态

// ES6解构赋值
const [data, setData] = useState(initialValue);
// data: 当前数据状态
// setData: 修改数据状态的方法

🎯 模块化最佳实践

1. 文件分离原则

// 一个文件一个模块（组件、函数、类）
export default TodoForm;
import TodoForm from './components/TodoForm';

2. 组件职责单一

TodoList: 主业务逻辑和状态管理
TodoForm: 表单输入处理
Todos: 列表数据展示

3. 数据流向清晰

TodoList (状态管理)
    ├── TodoForm (接收onAdd回调)
    └── Todos (接收todos数据)

📝 总结

通过这个TodoList项目，我们学习了：

组件化开发思想 - 将UI拆分为可复用的组件单元
React状态管理 - 使用useState管理组件内部状态
数据驱动界面 - 数据变化自动触发界面更新
模块化组织 - 合理的文件结构和模块导入导出
父子组件通信 - 通过props传递数据和回调函数

现代前端开发就像是用组件搭乐高积木，掌握了组件化思想，你就掌握了现代前端开发的核心技能。

💡 下一步学习建议：

尝试添加删除和编辑功能

学习useEffect处理副作用

了解React Router进行路由管理

探索状态管理库如Redux或Zustand

React组件化开发实战：从0到1构建TodoList应用

前言