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

一、使用React 的必要性

🚩React采用了组件化开发的思想，将页面拆分成多个独立的组件，每个组件负责自己的逻辑和渲染。这种组件化的开发方式使得代码更加模块化、可复用和易于维护。开发者可以将复杂的页面拆分成多个小的组件，每个组件专注于自己的功能，提高了开发效率和代码质量。除此之外，React使用虚拟DOM来管理页面的渲染和更新。虚拟DOM是一个轻量级的JavaScript对象，它表示页面的结构和状态。当页面的状态发生变化时，React会通过比较虚拟DOM的差异，然后只更新需要更新的部分，而不是重新渲染整个页面。这种优化可以提高页面的性能和响应速度，减少不必要的DOM操作。

二、待办事项列表示例

🚩话不多说，上代码：

import React, { useState } from 'react';

const TodoList = () => {
  // 存储待办事项的状态
  const [todos, setTodos] = useState([]);
  // 用户输入的待办事项
  const [input, setInput] = useState('');

  // 添加待办事项
  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  // 编辑待办事项
  const editTodo = (index, value) => {
    const updatedTodos = [...todos];
    updatedTodos[index] = value;
    setTodos(updatedTodos);
  };

  // 删除待办事项
  const deleteTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos.splice(index, 1);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="text"
              value={todo}
              onChange={(e) => editTodo(index, e.target.value)}
            />
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

🚩解释：

通过使用React的Hooks API来管理组件内的状态。todos数组用于存储待办事项，input变量用于保存用户输入的待办事项内容。

添加功能通过addTodo函数实现，当用户点击Add按钮时，会将输入的待办事项添加到todos数组中，并清空输入框的内容。

编辑功能通过editTodo函数实现，当用户改变待办事项的内容时，会更新todos数组中对应索引位置的值。

删除功能通过deleteTodo函数实现，当用户点击Delete按钮时，会从todos数组中删除对应索引位置的待办事项。

最后使用map方法遍历todos数组，将每个待办事项渲染为一个列表项。每个列表项包含一个可编辑的输入框和一个Delete按钮，用于修改和删除待办事项。

三、总结

🚩React 提供了一种高效、可维护和可扩展的开发方式，帮助开发者构建复杂的用户界面和应用程序，无论是开发Web应用、移动应用还是桌面应用，React都是一个强大的工具和框架，值得前端开发者学习和掌握。