一、React的简介

React是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建可交互的单页面应用程序或复杂的用户界面。

React具有以下特点：

组件化开发：React基于组件的开发方式，将用户界面拆分为若干独立且可复用的组件。这样可以提高代码的灵活性和可维护性，同时也方便进行模块化开发和团队协作。
虚拟DOM：React使用虚拟DOM来提高页面渲染性能。它通过在内存中构建和操作虚拟DOM，最小化对实际浏览器DOM的直接访问，从而减少了性能上的损耗。
数据驱动的界面：React采用了单向数据流的概念，即数据从父组件传递给子组件，并且子组件不能直接修改父组件的数据。这种数据流的设计使得数据状态更加可控，提高了应用的可预测性。
JSX语法：React使用JSX语法，它是一种将HTML结构嵌入到JavaScript代码中的扩展语法。它使得编写组件的模板更加直观和简洁，同时也能够在代码中直接使用JavaScript表达式。
生命周期方法：React组件具有生命周期方法，它们在组件的不同阶段被调用，例如组件的初始化、更新和销毁等。这些方法可以用于执行特定的操作，比如获取数据、处理副作用或清理资源。
状态管理：React提供了一种名为"状态（state）"的机制，用于存储和管理组件的数据。通过使用setState方法更新状态，React能够自动重新渲染受影响的组件，并保持UI与数据的同步。
React Router：React Router是React官方提供的路由管理库，用于构建单页面应用中的路由功能。它允许开发者定义和管理不同URL路径对应的页面组件，从而实现页面之间的切换和导航。

React由于其灵活性、高效性和庞大的社区支持而备受开发者欢迎。它已经成为构建现代Web应用程序的首选框架之一。

二、实现待办时间列表

首先，创造一个TodoList组件来管理待办事项的状态和操作:


const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

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

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

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

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>

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

export default TodoList;

然后，在根组件中使用TodoList组件：

import TodoList from './TodoList';

const App = () => {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
};

export default App;

这样，当运行这个React应用时，将看到一个简单的待办事项列表。可以在输入框中输入待办事项的文本，点击"Add"按钮添加待办事项，点击每个待办事项旁边的删除按钮删除相应的待办事项。也可以直接编辑每个待办事项的文本。

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

一、React的简介

二、实现待办时间列表