36 实现功能与优化

在上一篇中，我们详细讲解了如何搭建React.js项目的基本结构，今天我们将深入探索如何在项目中实现具体的功能，并进行必要的优化。我们将通过实际案例，利用React.js的核心特性来构建一个简单的任务管理器应用程序。

项目功能实现

1. 设计任务管理器的基本功能

首先，我们需要定义我们的任务管理器所需的基本功能：

• 添加任务
• 查看任务列表
• 删除任务
• 标记任务为完成

让我们从添加任务开始实现。

2. 添加任务功能

我们将使用 React 的 useState 钩子来管理任务状态。以下是一个简单的代码示例：

import React, { useState } from 'react';

const TaskManager = () => {
    const [tasks, setTasks] = useState([]);
    const [taskInput, setTaskInput] = useState('');

    const addTask = () => {
        if (taskInput) {
            setTasks([...tasks, { text: taskInput, completed: false }]);
            setTaskInput('');
        }
    };

    return (
        <div>
            <input 
                type="text" 
                value={taskInput} 
                onChange={(e) => setTaskInput(e.target.value)} 
                placeholder="输入任务" 
            />
            <button onClick={addTask}>添加任务</button>
            <TaskList tasks={tasks} setTasks={setTasks} />
        </div>
    );
};

const TaskList = ({ tasks, setTasks }) => {
    const deleteTask = (index) => {
        const newTasks = tasks.filter((_, i) => i !== index);
        setTasks(newTasks);
    };

    return (
        <ul>
            {tasks.map((task, index) => (
                <li key={index}>
                    {task.text}
                    <button onClick={() => deleteTask(index)}>删除</button>
                </li>
            ))}
        </ul>
    );
};

export default TaskManager;

在上面的代码中，我们创建了一个 TaskManager 组件，其中包含了添加任务的输入框和按钮。任务会保存在 tasks 状态中，我们通过输入框捕获用户输入，并在点击“添加任务”按钮时将其添加到任务列表中。

3. 查看任务列表

任务列表的显示已经在 TaskList 组件中实现。我们通过 map 方法遍历 tasks 数组，将每个任务显示为列表项，并提供删除按钮。

4. 标记任务为完成

为了实现标记任务为完成的功能，我们需要在任务对象中增加一个 completed 属性，并在 TaskList 中提供切换功能。以下是修改后的代码：

const TaskList = ({ tasks, setTasks }) => {
    const toggleTaskCompletion = (index) => {
        const newTasks = tasks.map((task, i) => 
            i === index ? { ...task, completed: !task.completed } : task
        );
        setTasks(newTasks);
    };

    return (
        <ul>
            {tasks.map((task, index) => (
                <li key={index} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
                    <span onClick={() => toggleTaskCompletion(index)}>{task.text}</span>
                    <button onClick={() => deleteTask(index)}>删除</button>
                </li>
            ))}
        </ul>
    );
};

在这个版本中，我们为每个任务的文本增加了 onClick 事件处理程序，以便在用户点击时切换任务的完成状态。

代码优化

完成了基本功能后，我们要确保代码的优化和可读性：

1. 懒加载和性能优化

如果任务列表变得非常庞大，我们可以使用懒加载来提高性能。React 提供了 React.lazy 和 Suspense，可以实现组件的懒加载。

import React, { Suspense, lazy } from 'react';

const TaskList = lazy(() => import('./TaskList'));

const TaskManager = () => {
    // 其他代码保持不变
    return (
        <div>
            <input 
                type="text" 
                value={taskInput} 
                onChange={(e) => setTaskInput(e.target.value)} 
                placeholder="输入任务" 
            />
            <button onClick={addTask}>添加任务</button>
            <Suspense fallback={<div>加载任务列表...</div>}>
                <TaskList tasks={tasks} setTasks={setTasks} />
            </Suspense>
        </div>
    );
};

2. 使用useEffect处理副作用

如果你想在任务发生变化时调用API（如保存到数据库），可以使用 useEffect 钩子来处理副作用：

import { useEffect } from 'react';

const TaskManager = () => {
    // 其他代码保持不变

    useEffect(() => {
        // 假设我们有一个API来保存任务
        const saveTasks = async () => {
            // 调用API保存tasks
        };
        saveTasks();
    }, [tasks]); // 依赖于tasks变化
};

结论

到此为止，我们成功实现了一个简单的任务管理器，通过实际代码展示了如何使用 React.js 创建交互式功能。我们同时进行了基本优化，以确保之后的扩展和维护能够更加顺利。

下一篇中，我们将探索如何将我们的应用与后端数据服务集成，以及如何进行状态管理的深入探讨。保持关注，继续学习React.js的强大功能！