前言

在计算机专业的学习中，掌握知识点是至关重要的。然而，仅仅听课和阅读教材可能并不足以真正理解和应用所学的内容。在这个信息爆炸的时代，我们需要更加主动和高效地学习，以提升自己在计算机领域的竞争力。而实践记录和笔记，作为学习的得力助手，能够帮助我们更好地理解知识点，加深记忆，并提供一个有组织的学习框架。我们可以不断总结和反思，发现自己的不足之处，并逐步提升自己的学习能力和解决问题的能力~让我们一起开启笔记/实践记录的学习之旅吧！

React 实现一个简单的待办事项列表

今天我们来学习和记录一下前端性能优化与调试技巧的实战内容，这篇文章记录学习的是关于React 实现一个简单的待办事项列表的内容。

关于 React

React 是一个流行的JavaScript 库，用于构建用户界面。它通过组件化开发的方式，使得构建交互式、可复用和可维护的前端应用程序变得更加简单。

React 的核心思想是将页面拆分成独立的组件，每个组件负责管理自己的状态和渲染逻辑。这种组件化的开发方式使得代码更易于理解和维护，同时也方便了团队协作。

React 提供了虚拟DOM（Virtual DOM）的概念，通过对比前后两个虚拟DOM的差异来高效地更新实际的DOM。这种优化手段使得React在性能上表现出色。此外，React 还支持服务端渲染，提供了更好的性能和SEO优化。

React 生态系统非常丰富，有大量的社区贡献的开源组件和工具，例如 React Router 用于处理路由，Redux 用于状态管理，Axios 用于发起网络请求等。这些工具和组件的存在使得开发者能够更加高效地构建应用程序。

实践记录

创建一个空白的 React 项目： 使用 Create React App 或其他类似工具创建一个新的 React 项目。
创建一个空白的 React 项目： 使用 Create React App 或其他类似工具创建一个新的 React 项目。

JavaScript 复制代码

 import React from 'react';

const TodoItem = ({ todo, onDelete, onEdit }) => {
  const handleDelete = () => {
    onDelete(todo.id);
  };

  const handleEdit = () => {
    onEdit(todo.id);
  };

  return (
    <div>
      <span>{todo.text}</span>
      <button onClick={handleDelete}>删除</button>
      <button onClick={handleEdit}>编辑</button>
    </div>
  );
};

export default TodoItem;

在上述代码中，TodoItem 组件接收 todo、onDelete 和 onEdit 作为 props。todo 是代表某个待办事项的对象，包含 id 和 text 属性。onDelete 和 onEdit 分别是删除和编辑待办事项的回调函数。

创建待办事项列表组件： 在同一个目录下创建一个新的组件文件 TodoList.js，并编写以下代码：

JavaScript 复制代码

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos, onDelete, onEdit }) => {
 return (
   <div>
     {todos.map(todo => (
       <TodoItem key={todo.id} todo={todo} onDelete={onDelete} onEdit={onEdit} />
     ))}
   </div>
 );
};

export default TodoList;

在上述代码中，TodoList 组件接收 todos、onDelete 和 onEdit 作为 props。todos 是待办事项的数组，onDelete 和 onEdit 分别是删除和编辑待办事项的回调函数。该组件使用 map 方法遍历 todos 数组，并为每个待办事项渲染一个 TodoItem 组件。

创建主应用程序组件： 在 src/App.js 文件中编写以下代码：

JavaScript 复制代码

import React, { useState } from 'react';
import TodoList from './TodoList';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      const todo = {
        id: Date.now(),
        text: newTodo.trim()
      };
      setTodos([...todos, todo]);
      setNewTodo('');
    }
  };

  const handleDeleteTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const handleEditTodo = id => {
    const editedTodo = prompt('请输入新的待办事项：');
    if (editedTodo && editedTodo.trim() !== '') {
      setTodos(
        todos.map(todo => {
          if (todo.id === id) {
            return { ...todo, text: editedTodo.trim() };
          }
          return todo;
        })
      );
    }
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={newTodo}
        onChange={e => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>添加</button>
      <TodoList todos={todos} onDelete={handleDeleteTodo} onEdit={handleEditTodo} />
    </div>
  );
};

export default App;

在上述代码中，App 组件使用 useState 钩子来管理状态。它定义了 todos 和 newTodo 两个状态，并提供了添加、删除和编辑待办事项的回调函数。该组件包括一个标题、一个输入框、一个添加按钮以及一个 TodoList 组件用于展示待办事项列表。

渲染应用： 在 src/index.js 文件中编写以下代码：

JavaScript 复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

通过以上步骤，我们就可以实现一个简单的待办事项列表。用户可以通过输入框添加新的待办事项，通过删除和编辑按钮删除或编辑已有的待办事项。所有的状态管理和交互逻辑都集中在 App 组件中，而 TodoList 和 TodoItem 组件用于展示和处理待办事项的列表。这样的组件拆分和状态管理设计遵循了 React 的最佳实践，使代码更加清晰和可维护。

文章仅为个人学习笔记，如有错误，欢迎指正。

React 实现一个简单的待办事项列表 | 青训营

前言

React 实现一个简单的待办事项列表

关于 React

实践记录