React 参考手册（快速上手）

React 参考手册：从零开始掌握现代前端开发核心

你是否曾面对一个复杂的前端页面，看着一堆 HTML、CSS 和 JavaScript 混在一起，感觉无从下手？或者在团队协作中，发现组件状态管理混乱、更新逻辑难以追踪？这些问题，正是 React 诞生的初衷——让构建用户界面变得简单、可预测、可复用。

作为当前最流行的前端框架之一，React 不仅改变了我们编写 UI 的方式，更重新定义了“组件化”这一概念。无论你是刚入门编程的新手，还是已有几年经验的中级开发者，这份 React 参考手册都将为你提供一条清晰、实用的学习路径。

在接下来的内容中，我会带你一步步理解 React 的核心思想，从最基础的 JSX 语法，到状态管理、生命周期，再到高级特性如自定义 Hook 和性能优化。每一步都配有真实代码示例和详细注释，确保你不仅能“看懂”，更能“用得上”。

别担心，我们不会一上来就讲 React 18 的新特性或复杂的 Context API。先从最简单的“Hello World”开始，像搭积木一样，一块一块地构建起你的 React 知识体系。

JSX 语法：让 HTML 和 JavaScript 融为一体

在传统前端开发中，HTML 和 JavaScript 是分开的。但 React 引入了 JSX（JavaScript XML）这一语法糖，让你可以在 JavaScript 中直接写类似 HTML 的结构。这不仅提升了开发效率，也让组件逻辑与视图结构紧密耦合。

// 示例：创建一个简单的欢迎组件
function Welcome(props) {
  // props 是组件接收的参数，类似函数的入参
  // 这里的 name 来自父组件传入的属性
  return (
    <div>
      <h1>你好，{props.name}！</h1>
      <p>欢迎来到 React 的世界。</p>
    </div>
  );
}

// 渲染组件到页面中的某个元素
ReactDOM.render(
  <Welcome name="小明" />,
  document.getElementById('root')
);

注释说明：

• <Welcome name="小明" /> 是 JSX 语法，它会被 React 编译为 React.createElement(Welcome, { name: "小明" })。
• {props.name} 表示在 JSX 中插入 JavaScript 表达式，大括号内可以放变量、函数调用或任意合法表达式。
• ReactDOM.render() 是 React 的入口方法，将组件挂载到指定 DOM 节点上。

小贴士：JSX 并不是必须的，你可以完全用纯 JavaScript 写 React 组件，但 JSX 让代码更直观，尤其适合描述 UI 结构。

组件化开发：把 UI 拆成可复用的“积木”

在大型项目中，页面通常由多个独立的 UI 模块组成，比如导航栏、卡片列表、模态框等。React 的核心理念就是“组件化”——将 UI 拆分成一个个独立、可复用的组件。

创建函数式组件与类组件

React 支持两种方式定义组件：函数式和类式。目前推荐使用函数式组件，配合 Hooks，代码更简洁。

// 函数式组件示例
function Button({ text, onClick }) {
  // text 和 onClick 是从父组件传入的 props
  // 只要 props 改变，组件就会重新渲染
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

// 使用示例
<Button text="点击我" onClick={() => alert("按钮被点击了")} />

注释说明：

• function Button({ text, onClick }) 使用了对象解构语法，直接从 props 中提取需要的字段。
• onClick 是 React 的事件监听器，和原生 HTML 的 onclick 类似，但使用驼峰命名。
• () => alert(...) 是一个匿名函数，作为事件处理函数传入。

// 类组件示例（传统写法，已逐渐被函数式取代）
class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = { count: 0 };
  }

  increment = () => {
    // 使用 setState 更新状态
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.increment}>+1</button>
      </div>
    );
  }
}

注释说明：

• constructor 是类组件的构造函数，用于初始化 this.state。
• this.setState() 是更新状态的唯一方式，React 会自动触发重新渲染。
• render() 方法返回组件的 UI 结构，必须存在。

状态管理：让组件“记得”用户操作

如果你只用无状态组件，那它就是“一次性”的：用户点击一次，组件渲染一次，然后就“忘记”了。但大多数应用需要“记住”用户的操作，比如购物车数量、登录状态、输入框内容等。

这就是状态（State）的作用。

使用 useState Hook 管理状态

React 16.8 引入了 Hooks，让函数式组件也能拥有状态。

import React, { useState } from 'react';

function TodoList() {
  // useState 返回一个数组：[当前状态值, 状态更新函数]
  const [todos, setTodos] = useState([]); // 初始化为空数组
  const [inputValue, setInputValue] = useState(''); // 输入框的值

  const addTodo = () => {
    if (inputValue.trim() === '') return; // 防止空输入

    // 使用 setTodos 更新状态，传入新数组
    setTodos([
      ...todos, // 保留原有 todos
      { id: Date.now(), text: inputValue, completed: false }
    ]);
    setInputValue(''); // 清空输入框
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入待办事项"
      />
      <button onClick={addTodo}>添加</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            >
              {todo.text}
            </span>
            <button onClick={() => toggleComplete(todo.id)}>
              {todo.completed ? '取消' : '完成'}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

注释说明：

• useState([]) 初始化一个空数组作为 todos 状态。
• setTodos([...todos, ...]) 使用展开运算符创建新数组，不能直接修改原数组。
• key={todo.id} 是 React 识别列表项的重要属性，避免重复渲染。
• onChange={(e) => setInputValue(e.target.value)} 实现双向绑定。

事件处理与表单控制

React 的事件处理与原生 DOM 有些不同。它使用合成事件（SyntheticEvent），并统一了浏览器兼容性问题。

受控组件 vs 非受控组件

受控组件：组件的状态由 React 控制，输入值通过 value 和 onChange 绑定。

function ControlledInput() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="请输入名字"
    />
  );
}

非受控组件：使用 ref 获取 DOM 元素，不通过 React 管理状态。

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // 直接操作 DOM
  };

  return (
    <>
      <input ref={inputRef} placeholder="非受控输入框" />
      <button onClick={focusInput}>聚焦</button>
    </>
  );
}

注释说明：

• useRef() 创建一个可变的引用对象，current 属性指向 DOM 节点。
• 适合用于聚焦、获取输入值（如文件上传）、集成第三方库等场景。

常用 Hook 汇总

Hook 是 React 16.8 的重大革新，让函数式组件具备了类组件的全部能力。以下是几个最常用的 Hook：

使用建议：

• useEffect 中的依赖数组要写全，避免遗漏导致无限循环。
• useCallback 和 useMemo 适合性能优化，但不要滥用。

总结与进阶建议

React 参考手册不只是一个知识清单，更是一套开发思维的训练工具。从 JSX 到组件化，从状态管理到事件处理，每一个概念都在帮助你构建更清晰、更可维护的前端应用。

对于初学者，建议从一个简单的 Todo List 开始，逐步添加功能：添加、删除、标记完成、本地存储。每完成一个功能，就理解一次 React 的核心机制。

对于中级开发者，可以尝试使用 React Router 实现多页面跳转，结合 Context 管理全局状态，甚至探索 Redux Toolkit 或 Zustand 等状态管理库。

记住：React 的魅力不在于它能做什么，而在于它如何让你“想清楚”UI 的变化逻辑。当你能用几行代码描述一个复杂的交互流程时，你就真正掌握了 React 的精髓。

这份参考手册，愿你随时翻阅，随时进步。