React 初体验：从零搭建一个响应式任务列表应用

AliciaIr
202 阅读6分钟

React 初体验：从零搭建一个响应式任务列表应用

作为一名刚刚接触前端开发的大学生，最近深入学习了 React 这个流行的 JavaScript 库，并尝试用它搭建了一个简单的任务列表（TODOS）应用。这个过程让我对 React 的组件化开发模式、状态管理以及响应式数据处理有了更直观的理解，以下是我的学习笔记和实践总结。

从原生 JS 到 React 的思考转变

在接触 React 之前，我们通常使用原生 JavaScript 进行开发，直接操作 DOM。这种开发方式虽然可以实现功能，但存在一些明显的问题，比如代码复用性差、维护成本高，以及在处理复杂交互时容易导致代码混乱。原生 JS 侧重于底层 API 的操作，对于业务逻辑的抽象能力较弱。

而 React 提供了一种完全不同的开发思路：通过组件化的方式构建用户界面，将页面拆分为多个独立的组件，每个组件负责一部分功能和 UI 展示，这样不仅提高了代码的复用性，也使得代码结构更加清晰，便于维护。在 React 中，我们不再需要频繁地手动操作 DOM，而是通过声明式编程的方式，让 React 自动管理 DOM 的更新，从而提高开发效率。

React 项目的快速搭建

必备工具：npm 与 Vite

在开始 React 项目之前，我们需要了解两个重要的工具：npm 和 Vite。npm 是 Node.js 的包管理器，类似于 Python 的 pip，它可以帮助我们快速安装和管理项目所需的依赖包。而 Vite 是一个现代化的前端构建工具，它可以显著提升项目的开发效率。

项目创建步骤

  1. 初始化项目 ：使用npm init vite命令，按照提示选择 React 和 JavaScript 作为项目模板，Vite 会为我们生成一个基本的项目结构。
  2. 进入项目目录 ：使用cd 项目名称命令进入项目文件夹。
  3. 安装依赖 ：运行npm i命令，这会根据项目配置自动下载并安装所需的依赖包，所有安装的包都会存储在node_modules文件夹中。
  4. 启动开发服务器 ：使用npm run dev命令启动项目，Vite 会自动监听文件变化，并在本地启动一个开发服务器，默认端口是 5173，我们可以在浏览器中访问http://localhost:5173来查看项目效果。

React 组件开发的核心要点

组件是开发的基本单元

在 React 中，组件是构建用户界面的最小单元，它将 HTML、CSS 和 JavaScript 逻辑封装在一起。一个组件可以是一个函数，也可以是一个类，目前函数组件配合 Hooks 的使用更为普遍。函数组件的编写非常简单，它就是一个普通的 JavaScript 函数，返回相应的 JSX 代码，用于描述 UI 的结构。

用 JSX 编写混合代码

JSX 是 React 中的一种语法扩展，它允许我们在 JavaScript 代码中直接编写类似 HTML 的结构。在 JSX 中，我们可以使用花括号{}来嵌入 JavaScript 表达式，这样就可以很方便地在 UI 中动态展示数据或执行逻辑，而不需要像原生 JS 那样频繁地切换 DOM 操作和 JS 逻辑。

例如，如果我们有一个任务列表的数据['脱单', '学习', '健身']，在 React 组件中可以这样渲染：

JavaScript

复制

function TodoList() {
  const todos = ['脱单', '学习', '健身'];
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

这里我们使用了map函数来遍历任务数组，并在 JSX 中动态生成列表项。

状态管理：useState 的妙用

在实际应用中，数据往往会随着时间发生变化，这就需要我们对数据状态进行管理。React 提供了useState这个 Hook，它可以让我们在函数组件中使用状态。

useState的使用方法是：调用useState(初始值)会返回一个数组，数组的第一个元素是当前的状态值，第二个元素是一个函数，用于更新状态。例如：

JavaScript

复制

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState(['脱单', '学习', '健身']);
  // ...
}

在这里，todos是我们定义的状态变量，setTodos是用于更新todos的函数。当我们需要修改任务列表时，只需要调用setTodos并传入新的数据，React 会自动重新渲染组件，确保 UI 与状态保持一致，这种响应式的数据处理方式大大简化了开发过程。

案例实战：构建一个响应式 TODO 列表应用

基于上述知识，我动手实现了一个简单的任务列表应用，以下是完整的代码实现：

App.js

JavaScript

复制

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState(['脱单', '学习', '健身']);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div className="todo-app">
      <h1>我的任务列表</h1>
      <div className="input-container">
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="添加新任务..."
        />
        <button onClick={addTodo}>添加任务</button>
      </div>
      <ul className="todo-list">
        {todos.map((todo, index) => (
          <li key={index} className="todo-item">
            {todo}
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

index.js

JavaScript

复制

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

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

index.css

css

复制

.todo-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.todo-list {
  list-style-type: none;
  padding: 0;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

这个应用实现了以下功能：

  1. 初始页面展示三个任务：'脱单'、'学习'、'健身'。
  2. 用户可以在输入框中添加新的任务，点击“添加任务”按钮后，新任务会被添加到列表中。
  3. 每个任务项右侧都有一个“删除”按钮，点击后可以删除对应的任务。

React 学习的收获

通过这次 React 项目实践，我深刻体会到了 React 的优势所在。它通过组件化开发提高了代码的可维护性和复用性，通过状态管理和响应式数据处理机制，大大简化了 UI 的更新和维护过程。相比原生 JS 开发，React 让我可以更加专注于业务逻辑本身，而不是被复杂的 DOM 操作所困扰

avatar
文章
阅读
粉丝