React 是由 Facebook（Meta）于 2013 年开源的 JavaScript 前端 UI 框架，由 Jordan Walke 创建。React 引入了 JSX、虚拟 DOM、组件化开发 等革命性理念，采用声明式编程范式，让构建复杂交互界面变得简单高效。
React 的核心定位是 构建用户界面的声明式组件库。它提供了：
React 由 Facebook 的 Jordan Walke 于 2011 年创建，最初用于 Facebook 的新闻动态功能。2013 年，React 在 JSConf 大会上正式开源，引入了 虚拟 DOM 和 JSX 两大核心理念，彻底改变了前端开发的方式。
// JSX 示例
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// JSX 条件渲染
function Status({ isActive }) {
return (
<div>
{isActive ? <span>✅ 活跃</span> : <span>⛔ 非活跃</span>}
</div>
);
}
// JSX 列表渲染
function UserList({ users }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}// 函数组件（推荐）
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 箭头函数组件
const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;
// 类组件（传统）
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}// useState - 状态管理
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>计数: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
// useEffect - 副作用处理
import { useEffect } from "react";
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]); // 依赖数组
return <div>{user?.name}</div>;
}
// useContext - 全局状态
import { createContext, useContext } from "react";
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Child />
</ThemeContext.Provider>
);
}
function Child() {
const theme = useContext(ThemeContext);
return <div>当前主题: {theme}</div>;
}
// 自定义 Hook
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
// 使用自定义 Hook
function UserList() {
const { data, loading, error } = useFetch("/api/users");
if (loading) return <div>加载中...</div>;
if (error) return <div>错误: {error.message}</div>;
return <ul>{data.map(...)}</ul>;
}// Redux Toolkit 示例
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { Provider, useDispatch, useSelector } from "react-redux";
// 创建 Slice
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1; },
decrement: state => { state.value -= 1; },
}
});
export const { increment, decrement } = counterSlice.actions;
// 创建 Store
const store = configureStore({
reducer: { counter: counterSlice.reducer }
});
// 使用 Redux
function Counter() {
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<p>计数: {count}</p>
<button onClick={() => dispatch(increment())}>+1</button>
<button onClick={() => dispatch(decrement())}>-1</button>
</div>
);
}
// 根组件
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}// React Router 示例
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/users">用户</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users" element={<UserList />} />
<Route path="/users/:id" element={<UserDetail />} />
</Routes>
</BrowserRouter>
);
}// Next.js 页面（app 目录）
// app/page.tsx
export default function Home() {
return <h1>Hello, Next.js!</h1>;
}
// API 路由（app/api/users/route.ts）
export async function GET() {
const users = await db.users.findMany();
return Response.json(users);
}
// 服务端组件（默认）
// 客户端组件（需标注 "use client"）
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}| 对比项 | React | Vue | Angular |
|---|---|---|---|
| 类型 | UI 库 | 渐进式框架 | 全栈框架 |
| 学习曲线 | 中等 | 平缓 | 陡峭 |
| 模板语法 | JSX | HTML + 指令 | HTML + 属性 |
| 状态管理 | Redux/Zustand | Pinia/Vuex | RxJS/Service |
| 移动端 | React Native | NativeScript/Weex | NativeScript |
| 生态大小 | 最大 | 很大 | 大 |
| 大厂背书 | Meta | 独立 | |
| 学习建议 | 全栈首选 | 快速上手 | 大型项目 |
JavaScript ES6+（箭头函数、解构、模块、Promise、async/await）
JSX、组件（函数/类）、Props、State、事件处理、条件渲染、列表渲染
Hooks（useState、useEffect、useContext、useReducer、自定义 Hook）
React Router、Redux/Zustand、Next.js、性能优化（memo、useCallback、useMemo）
React 是前端开发的"行业标准"。
它用 声明式编程、组件化开发、虚拟 DOM 重新定义了前端开发的方式。React 不仅是 UI 库，更是一个完整的生态系统，涵盖了 Web、移动端、桌面端和服务端渲染。
无论你是前端初学者还是资深开发者，React 都是必须掌握的技能。
"React 让构建复杂 UI 变得简单而优雅。" ⚛️