React是Facebook在2013年开源的前端框架，准确地说它是一个用于构建用户界面的JavaScript库。与Vue一样，React已经成为当前前端开发领域最主流的技术方案之一，被广泛用于单页应用、大型后台管理系统以及移动端开发（通过React Native）。React的核心思想是组件化和声明式编程：开发者只需描述界面在任意时刻应该是什么样子，React负责高效地更新DOM。本文将系统介绍React的核心概念、开发方式，并解答学习过程中最常见的问题。
React的核心概念与JSX语法
React最重要的特点是虚拟DOM。浏览器直接操作真实DOM的开销很大，React在内存中维护一棵虚拟DOM树，当数据变化时先在虚拟DOM上进行对比（这个过程称为Diff算法），计算出真正需要变更的最小部分，再批量更新到真实DOM上。这种机制让开发者不必手动操作DOM，代码可维护性大幅提升。
JSX是React推荐的语法扩展，它允许在JavaScript中直接书写类似HTML的标签。JSX并不是模板语言，它最终会被Babel编译成普通的JavaScript函数调用。掌握JSX有几个要点：标签必须闭合、只能有一个根元素、class要写成className、行内样式要传入对象而不是字符串。下面是一个最简单的JSX示例：
function Welcome(props) {
return <h1 className="title">你好, {props.name}</h1>;
}
const element = <Welcome name="React" />;需要注意的是，JSX中的花括号可以放任何JavaScript表达式，但不能放语句（比如if判断）。条件渲染通常使用与运算符、三元运算符，列表渲染则使用map方法，并为每个元素提供唯一的key属性，这一点后面会详细说明。
组件开发与Hooks的使用
React组件分为函数组件和类组件两种写法。目前官方主推函数组件配合Hooks，代码更简洁，逻辑复用也更方便。函数组件本质上就是一个接收props参数并返回JSX的函数。组件内部的状态则通过useState这个Hook来管理：
import { useState } from 'react';
function Counter() {
// 声明一个状态变量count, 初始值为0
const [count, setCount] = useState(0);
return (
<div>
<p>当前点击次数: {count}</p>
<button onClick={() => setCount(count + 1)}>点我加一</button>
</div>
);
}除了useState，最常用的还有useEffect，它用来处理副作用，比如请求数据、订阅事件、操作定时器等。useEffect接收两个参数：第一个是副作用函数，第二个是依赖数组。当依赖数组中的值发生变化时，副作用函数会重新执行。如果传入空数组，则副作用只在组件首次渲染后执行一次，相当于类组件中的componentDidMount：
import { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
// 空依赖数组, 只在组件挂载时请求一次数据
fetch('https://api.ipipp.com/users')
.then(res => res.json())
.then(data => setUsers(data));
}, []);
return (
<ul>
{users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}使用Hooks有几条必须遵守的规则：只能在函数组件的最外层调用Hook，不能放在if语句、循环或普通函数内部；只能出现在React函数组件或自定义Hook中。违反这些规则会导致Hook调用顺序错乱，状态出现难以排查的异常。
组件间通信与状态管理方案
父子组件通信是最常见的场景。父组件向子组件传递数据通过props，子组件向父组件传递数据则通过回调函数：父组件先把一个函数作为props传给子组件，子组件在合适的时机调用该函数并把数据传回去。对于跨层级或兄弟组件之间的通信，简单的做法是状态提升，即把共享状态放到最近的公共父组件中管理。
当项目规模变大、组件嵌套很深时，逐层传递props（俗称props drilling）会变得非常痛苦。这时需要引入全局状态管理方案。React内置的Context API适合存放主题、语言、登录信息这类低频变化的全局数据：
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext('light');
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
切换主题
</button>
<ThemeContext.Provider>
);
}
function Toolbar() {
// 任意深度的子组件都能直接读取主题
const theme = useContext(ThemeContext);
return <div>当前主题: {theme}</div>;
}对于频繁变化、逻辑复杂的共享状态，社区更推荐Redux Toolkit、Zustand或MobX这类专门的状态管理库。Redux强调单一数据源和纯函数 reducer，适合大型团队协作的项目；Zustand则轻量简洁，学习成本低，近年在中小项目中非常流行。
常见问题解答与注意事项
为什么列表渲染必须写key
key是React识别列表项的唯一标识。Diff算法依靠key来判断哪些元素发生了变化、哪些可以复用。如果不写key或直接使用数组下标作为key，在列表发生插入、删除、排序时，React可能错误复用节点，导致输入框内容错乱、动画异常等隐蔽问题。正确做法是使用数据中稳定且唯一的字段，比如id。
直接修改state为什么界面不更新
React依靠Object.is比较新旧state来判断是否触发重新渲染。如果直接对数组或对象进行原地修改，引用地址没有变化，React会认为state没有变，从而跳过渲染。所以更新数组必须使用slice、concat、扩展运算符等生成新数组的方式：
const [list, setList] = useState([1, 2, 3]); // 错误写法: 直接push不会触发更新 // list.push(4); setList(list); // 正确写法: 生成新数组 setList([...list, 4);
setState是同步还是异步
在React 18之前，事件处理函数中的多次setState会被批量合并为一次更新，看起来像是异步的。React 18开启了自动批处理，即使在Promise、setTimeout等异步回调中，多次setState也会合并。如果新的state依赖旧值，务必使用函数式更新写法setCount(prev => prev + 1)，避免读到过期的闭包值。
useEffect中的闭包陷阱
useEffect每次执行时都会捕获当次渲染的变量值，这被称为闭包陷阱。比如在定时器中读取count，可能永远读到旧值。解决办法有两种：把用到的变量加入依赖数组，或者使用useRef保存最新值。另外，useEffect中返回的清理函数非常重要，订阅、定时器、事件监听都必须在清理函数中注销，否则会造成内存泄漏。
受控组件与非受控组件的区别
表单元素的处理有两种方式。受控组件是指表单值由state驱动，通过onChange事件同步更新，数据流清晰，便于校验。非受控组件则是直接操作DOM，通过ref获取表单值，写法简单但不利于实时校验。官方推荐优先使用受控组件，只有在文件上传等特殊场景才使用非受控方式。
性能优化建议
React默认在父组件更新时会重新渲染所有子组件，即使子组件的props没有变化。常见的优化手段有三种：对于纯展示组件使用React.memo包装，只有props变化时才重新渲染；使用useMemo缓存计算结果，避免每次渲染都执行昂贵计算；使用useCallback缓存函数引用，防止传给子组件的回调函数每次都是新引用而使memo失效。此外，大列表渲染建议使用虚拟滚动方案，例如react-window，只渲染可视区域内的条目，能显著降低DOM节点数量。
总的来说，React的学习曲线虽然比Vue稍陡，主要因为JSX、函数式思维以及手动管理副作用，但它的生态极其丰富，灵活性和大型项目支撑能力都非常出色。建议初学者从函数组件和Hooks入手，先掌握useState、useEffect和组件通信，再逐步接触路由（React Router）、构建工具（Vite）和状态管理库，循序渐进就能构建出高质量的React应用。