React 真题：从零基础到实战的进阶之路

---

概述

React 真题实战指南带你从基础概念到实际应用，了解React的组件化编程思想与虚拟DOM机制，快速搭建React环境，创建与使用组件，掌握状态管理与生命周期方法，深入表单处理，并通过一个待办事项应用示例，实践React的高效开发流程。

React 基础概念介绍

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库，基于组件化编程思想，使用虚拟DOM提升性能。虚拟 DOM 是一个轻量级的内存中的 DOM 树，通过比较当前状态与期望状态来优化DOM更新，减少不必要的DOM操作。

组件化编程思想

在 React 中，界面通过组件构建，每个组件负责渲染特定的 UI 部分。组件可以是简单的一行代码，也可以是复杂的 UI 块。它们通过接收属性（props）获取外部数据，并通过状态（state）管理内部状态。组件之间可以相互通信，但通常通过 props 来传递数据。

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件
function App() {
  return <Greeting name="World" />;
}

虚拟 DOM

虚拟 DOM 是 React 的核心概念，它在复杂的用户界面中进行高效操作。React 通过比较当前状态与期望状态来确定需要更新的 DOM 元素，减少了不必要的 DOM 操作，提升应用性能。

// 假设数据发生变化
function updateData() {
  const newData = { name: "Alice" };
  this.setState(newData);
}

// 使用虚拟 DOM
function App() {
  ...
  const person = { name: "Bob" };
  ...
  return (
    <div>
      ...
      <p>{person.name}</p>
    </div>
  );
}
...

// 当 person.name 更改为 Alice 时，React 会比较虚拟 DOM 和真实 DOM
// 只更新 <p> 标签的内容，避免重绘整个页面

React 环境搭建

React 的项目通常基于 Node.js 开发，首先安装 Node.js。使用 create-react-app 快速创建 React 项目。

安装 Node.js

在终端或命令行中，运行以下命令：

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

创建 React 项目

安装完毕后，创建 React 项目：

npx create-react-app my-app
cd my-app
npm start

这将启动一个简单的 React 应用，并在浏览器中显示 "Hello, World!"。

组件创建与使用

在 React 中创建和使用组件涉及定义组件函数并实例化它们。

定义组件

function Hello({ name }) {
  return <p>Hello, {name}!</p>;
}

export default Hello;

使用组件

在其他组件中引入并使用 Hello 组件：

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello name="React" />
    </div>
  );
}

export default App;

状态管理与生命周期

状态管理

状态（state）是组件内部描述当前组件状态的对象。通过更新状态响应用户事件或外部数据变化。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

生命周期方法

React 提供了一系列生命周期方法，允许开发者在组件的不同阶段执行特定操作。

class Lifecycle extends React.Component {
  componentDidMount() {
    // 组件挂载后执行
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行
  }

  componentWillUnmount() {
    // 组件卸载前执行
  }

  render() {
    // 组件渲染逻辑
  }
}

React 表单处理

React 提供强大的表单处理能力，包括事件处理和状态管理实现复杂表单功能。

事件处理

import React from 'react';

function SubmitForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
  };

  const handleChange = (event) => {
    // 更新组件状态
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

React 真题实战

实现一个简单的待办事项应用，包括添加、删除和编辑待办事项的功能。

应用设计

1. 状态管理：使用 useState 管理待办事项列表及其状态。
2. UI：基于状态创建可交互的界面。
3. 事件处理：实现添加、删除和编辑待办事项的逻辑。

代码示例

import React, { useState } from 'react';

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

  const addTodo = (text) => {
    setTodos([...todos, { text, done: false }]);
  };

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].done = !newTodos[index].done;
    setTodos(newTodos);
  };

  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const editTodo = (index, newText) => {
    const newTodos = [...todos];
    newTodos[index].text = newText;
    setTodos(newTodos);
  };

  return (
    <div>
      <TodoForm addTodo={addTodo} />
      <TodoListDisplay todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} editTodo={editTodo} />
    </div>
  );
}

应用实现

// TodoForm 组件
function TodoForm({ addTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    addTodo(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={event => setText(event.target.value)} />
      <button type="submit">Add</button>
    </form>
  );
}

// TodoListDisplay 组件
function TodoListDisplay({ todos, toggleTodo, deleteTodo, editTodo }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          <TodoItem todo={todo} toggleTodo={() => toggleTodo(index)} deleteTodo={() => deleteTodo(index)} editTodo={newText => editTodo(index, newText)} />
        </li>
      ))}
    </ul>
  );
}

function TodoItem({ todo, toggleTodo, deleteTodo, editTodo }) {
  return (
    <div>
      <input type="checkbox" checked={todo.done} onChange={() => toggleTodo()} />
      <input type="text" value={todo.text} onChange={event => editTodo(event.target.value)} />
      <button onClick={deleteTodo}>Delete</button>
    </div>
  );
}

通过以上步骤，你将从零基础逐步掌握 React 的核心概念、基本操作和实战技巧，最终能够构建实用的 Web 应用程序。React 的强大之处在于其灵活性和高效性，随着实践的深入，你将能够应对更多复杂的 UI 设计和功能实现。