React 考点精解：初级开发者必知的六大核心概念

本文深入解析React基础概念，覆盖React的定义与特点、JSX语法、组件化开发、状态与属性管理、生命周期方法、事件处理与表单，以及条件与列表渲染。着重讲解React的核心组件与API，通过实战案例展现如何利用这些概念构建复杂应用。

1. React 的定义与特点

React 是一个用于构建用户界面的库，具有以下主要特点：

• 组件化开发：React 将 UI 分解为可重用的组件，便于代码组织与维护。
• 虚拟 DOM：借助虚拟 DOM，React 可以更高效地更新界面，减少实际 DOM 操作的性能开销。
• 响应式更新：React 组件生命周期中的特殊方法允许开发者在组件状态或属性改变时执行特定操作。

1.2 JSX 语法简介

JSX 是一种 JavaScript 原生的 XML 衍生语法，它允许开发者在 JavaScript 代码中嵌入 HTML 样式，提高代码可读性：

import React from 'react';

function Example() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default Example;

1.3 组件化开发理解

在 React 中，组件是构建 UI 的基本单元。组件可以是类组件或函数组件，并可通过属性（props）和状态（state）传递数据与控制。

2.1 状态管理基础

状态（state）存储于组件内部，用于管理组件的状态，并在状态改变时触发组件重新渲染：

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

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

2.2 Props 的使用与传递

Props（属性）作为父组件传递给子组件的数据，子组件可通过 props 接受并响应外部数据：

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Alice" />
      <ChildComponent name="Bob" />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      Hello, {props.name}!
    </div>
  );
}

2.3 State 与 Props 区别及应用场景

• State 用于存储组件内部状态，适用于管理组件内部数据。
• Props 用于组件间通信，传递数据从父组件到子组件，或从外部到组件内部。

React 组件在生命周期的不同阶段调用特定方法，如下所示：

3.1 常用生命周期方法详解

• constructor：在实例化组件后调用，用于初始化 state 和绑定事件处理器。
• getDerivedStateFromProps：在组件重新渲染时调用，用于根据新的 props 计算新的 state。
• render：每次渲染时调用，生成组件树结构。
• getSnapshotBeforeUpdate：在渲染完成并更新 DOM 之前调用，获取当前 DOM 状态。
• componentDidMount：组件挂载到 DOM 后调用，用于执行实例化后操作。
• componentDidUpdate：组件更新后调用，处理更新后的状态或 DOM。
• componentWillUnmount：组件卸载前调用，用于清理资源。

3.2 实战示例：在不同阶段执行特定操作

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

  componentDidMount() {
    // 在组件挂载后执行操作
    this.fetchData();
  }

  componentDidUpdate(prevProps, prevState) {
    // 在组件更新后执行操作
    console.log('Component updated', this.state.value);
  }

  componentWillUnmount() {
    // 在组件卸载前清理资源
    // ...
  }

  fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    this.setState({ value: data.value });
  };

  render() {
    return (
      <div>
        <p>Data value: {this.state.value}</p>
      </div>
    );
  }
}

4.1 事件绑定与合成事件

事件处理在 React 中通过合成事件（Synthetic Events）实现：

class ButtonClick extends React.Component {
  handleClick = (event) => {
    alert('Button clicked!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

4.2 表单处理技巧

表单处理利用受控组件和非受控组件：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <form>
        <input type="text" name="name" onChange={this.handleChange} value={this.state.name} />
        <input type="email" name="email" onChange={this.handleChange} value={this.state.email} />
        <button onClick={this.handleSubmit}>Submit</button>
      </form>
    );
  }

  handleSubmit = () => {
    console.log(this.state);
    // 提交表单逻辑
  }
}

5.1 条件渲染与三元运算符

使用条件语句或三元运算符（? :）在 React 中实现条件渲染：

function Greeting(name) {
  return (
    <div>
      {name ? <h1>Hello, {name}!</h1> : <h1>Hello, World!</h1>}
    </div>
  );
}

5.2 列表渲染与 key 属性的重要性

列表渲染使用数组映射和 map 函数，每个列表项需要唯一的 key 属性：

function List(items) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

6.1 父子组件通信

通过 props 和 state 实现父子组件间的数据传递：

function ParentComponent() {
  const [counter, setCounter] = React.useState(0);

  return (
    <div>
      <ChildComponent counter={counter} />
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      Counter: {props.counter}
    </div>
  );
}

6.2 兄弟组件间通信策略

通常通过父组件或中介组件传递数据，或利用 Context API 实现跨层级通信。

6.3 使用 Context API 进行跨层级通信

Context API 允许在多个组件间共享状态：

import React, { createContext, useContext, useState } from 'react';

const TaskContext = createContext();

function TaskList() {
  const [tasks, setTasks] = useState([]);

  return (
    <TaskContext.Provider value={{ tasks, addTask, deleteTask, toggleTask }}>
      {/* Your UI components here */}
    </TaskContext.Provider>
  );
}

function TaskApp() {
  return (
    <TaskContext.Consumer>
      {(context) => (
        <div>
          <TaskList />
        </div>
      )}
    </TaskContext.Consumer>
  );
}

function ContextProvider() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  const toggleTask = (index) => {
    const updatedTasks = tasks.map((task, i) => {
      if (i === index) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });
    setTasks(updatedTasks);
  };

  return (
    <TaskContext.Provider value={{ tasks, addTask, deleteTask, toggleTask }}>
      {/* Your UI components here */}
    </TaskContext.Provider>
  );
}

创建待办事项应用，包含添加、删除和标记已完成任务功能，使用 Context API 管理任务列表的状态：

import React, { createContext, useContext, useState } from 'react';

const TaskContext = createContext();

function TaskList() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  const toggleTask = (index) => {
    const updatedTasks = tasks.map((task, i) => {
      if (i === index) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });
    setTasks(updatedTasks);
  };

  return (
    <TaskContext.Provider value={{ tasks, addTask, deleteTask, toggleTask }}>
      {/* Your UI components here */}
    </TaskContext.Provider>
  );
}

function TaskApp() {
  return (
    <TaskContext.Consumer>
      {(context) => (
        <div>
          <TaskList />
        </div>
      )}
    </TaskContext.Consumer>
  );
}

export default TaskApp;

通过这个实战演练，可以加深对 React 核心概念的理解与应用。