代办事项列表实现 | 青训营

泛泛蚁生
90 阅读4分钟

使用React来实现一个简单的待办事项列表，用户可以添加、编辑和删除待办事项。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [currentTodo, setCurrentTodo] = useState('');

  return (
    <div>
      <h1>待办事项列表</h1>

      <form onSubmit={event => {
        event.preventDefault();
        addTodo();
      }}>
        <input
          type="text"
          value={currentTodo}
          onChange={event => setCurrentTodo(event.target.value)}
          placeholder="添加新的任务"
        />
        <button type="submit">添加</button>
      </form>

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

export default TodoList;

添加待办事项

  const addTodo = () => {
    if (currentTodo.trim() !== '') {
      const newTodo = {
        id: new Date().getTime(),
        text: currentTodo
      };
      setTodos([...todos, newTodo]);
      setCurrentTodo('');
    }
  };

编辑待办事项

  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          text: newText
        };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

删除待办事项

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

在这个示例中，我使用useState钩子来管理状态。todos状态用于存储待办事项列表，每个待办事项是一个具有id和text属性的对象。currentTodo状态用于追踪用户正在输入的当前待办事项。

我定义了三个函数：addTodo用于添加待办事项，它会在表单提交时被调用；editTodo用于编辑待办事项，它会在文本框的值发生变化时被调用；deleteTodo用于删除待办事项，它会在删除按钮被点击时被调用。

在返回的JSX中，有一个包含表单和待办事项列表的容器。表单中的文本框和提交按钮与状态currentTodo有关。待办事项列表则通过todos状态进行渲染，每个待办事项都有一个可以编辑和删除的文本框和按钮。

最后，将TodoList组件导出供其他组件使用。

可以在父组件中通过引入并渲染TodoList组件来使用它：

import React from 'react';
import TodoList from './components/TodoList';

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

export default App;

这样，待办事项列表就会在应用程序中显示，并且用户可以进行添加、编辑和删除操作。总体使用下来React的优点还是很明显的，就比如：

  • React的组件化开发模式使得代码结构清晰，易于维护和扩展。使用React的状态管理能力，我们可以轻松地跟踪和更新待办事项列表。

  • React的受控组件也为表单处理提供了方便的方式。我们可以使用useState钩子来追踪表单输入的值，并通过事件处理函数来处理用户的交互。这样，我们可以在一处更新状态，并自动更新UI。

  • 另外，React也支持对列表进行动态渲染，可以根据列表数据生成对应的JSX元素，从而实现对待办事项的遍历、展示和操作。这样的灵活性使得我们可以方便地进行编辑和删除操作，非常适合处理多个待办事项的情况。

由于之前的技术栈仅限于Vue,下面我来介绍一下我使用React编写待办事项列表一些优势的感悟：

  • 组件化开发：React以组件化开发为核心思想，通过构建可复用的组件来构成应用。这种开发方式使得代码更加模块化、可维护性更高。在待办事项列表中，可以将每个待办事项作为一个组件，方便处理和管理。

  • 虚拟DOM：React通过虚拟DOM的概念，能够非常高效地更新和渲染页面。每当状态发生变化时，React会计算出应该更新的最小化的DOM操作，并将其应用到实际的DOM上。这减少了不必要的操作，提高了性能和响应性。

  • 单向数据流：React采用了单向数据流的模式，即数据只能从父组件传递到子组件，子组件无法直接修改父组件的数据。这种模式使得代码的数据流动更可控，避免了复杂的数据交互和状态管理问题。

  • 生态系统丰富：React拥有庞大的生态系统和社区支持，有大量的第三方库和工具可供使用，能够极大地提升开发效率。例如，使用React的官方状态管理库Redux可以方便地管理待办事项列表的状态。

  • 组件化的UI开发：React的JSX语法可以让UI开发更直观和易于理解。通过组件的复用和组合，可以轻松构建复杂的用户界面。

虽然React具有很多优势，但也需要注意一些挑战。学习和掌握React的概念和API可能需要一定的时间和学习曲线。 总之，使用React编写待办事项列表可以让开发变得更加高效、灵活和可维护。它提供了一种现代化的开发方式，能够处理复杂的交互逻辑和数据管理需求。

avatar
文章
阅读
粉丝