React实践 | 青训营

zh523
129 阅读3分钟

实践记录：使用React实现一个简单的待办事项列表

一、项目背景 在参加字节青训营前端基础课程期间，我选择了以React框架为基础，实现一个简单的待办事项列表的实践项目。通过这个项目，我可以加深对React的理解，并熟悉React的开发流程和工具使用。

二、项目准备 在开始项目之前，首先需要配置React开发环境。我选择使用create-react-app工具来快速创建项目。使用以下命令创建一个新的React应用：

bash
复制代码
npx create-react-app todo-list
cd todo-list

三、项目实施

  1. 创建组件 首先，我创建了两个组件：TodoList和TodoItem。TodoList组件负责渲染整个待办事项列表，TodoItem组件负责渲染每一个待办事项。 在src目录下创建components文件夹，并在该文件夹下创建TodoList.js和TodoItem.js两个文件。
  2. 实现待办事项添加功能 在TodoList组件中，我使用useState钩子来管理待办事项列表的状态。通过输入框获取用户输入的待办事项内容，并将其添加至列表中。在提交表单时，我用一个自定义的函数handleAdd来处理添加操作，并更新列表的状态。
  3. 实现待办事项编辑和删除功能 在TodoItem组件中，我使用useState钩子来管理每一个待办事项的状态。通过点击待办事项，可以将其内容显示在输入框中，并进行编辑操作。同时，我在每一个待办事项后面添加了一个删除按钮，点击按钮可以删除该待办事项。
  4. 整合组件 在App.js中，我将TodoList组件引入，并在其中使用TodoItem组件来渲染每一个待办事项。通过传递props的方式，实现待办事项的删除功能。
jsx
复制代码
import React, { useState } from 'react';
import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]);

  const handleDelete = (todo) => {
    const updatedTodos = todos.filter((item) => item !== todo);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <TodoList todos={todos} onDelete={handleDelete} />
    </div>
  );
}

export default App;
  1. 运行项目 在命令行中输入以下命令启动项目：
sql
复制代码
npm start

此时，会自动打开一个浏览器窗口，显示出待办事项列表页面。可以尝试添加、编辑和删除待办事项，页面上的列表会实时更新。

四、总结

React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式，将界面划分为独立可复用的组件，通过数据驱动的方式更新界面。React通过虚拟DOM技术实现高效的UI更新，通过比较虚拟DOM树的差异来最小化真实DOM操作，提升性能。

React的核心思想是单向数据流，即数据从父组件传递给子组件，子组件通过props接收并渲染。当数据发生变化时，React会自动重新渲染相应的组件部分，而无需手动操作DOM。

React还提供了强大的状态管理机制和生命周期方法，使得组件的状态管理和副作用处理更加方便和可控。此外，React还支持服务端渲染和React Native跨平台开发等特性。

React具有高度的灵活性和可扩展性，可以与其他库和框架（如Redux、Vue等）结合使用。它也有庞大的社区支持和丰富的第三方库，使得开发者能够快速构建复杂交互的Web应用。

总之，React通过组件化、虚拟DOM和单向数据流等特性，使得前端开发更加高效、可维护和可扩展，成为构建现代Web应用的理想选择。

avatar
文章
阅读
粉丝