React 基础

React 是用于构建用户界面的 JavaScript 库（UI 库），由 Meta 维护。当前文档以 React 18+ 为主线（createRoot、并发特性、Hooks）。前置：JavaScript 基础、HTML、CSS。

可与 Vue 基础对照学习：二者都组件化，但 React 以 函数组件 + Hooks 为默认写法，更新由 setState 触发重新渲染。

React 是什么、不是什么

	说明
是	用组件描述 UI；用状态驱动界面更新；可与任意后端、路由、状态库组合
不是	完整框架（路由、数据获取需选配库）；模板语言（使用 JSX 或 `createElement`）

应用入口（React 18+）

tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

createRoot：React 18 起推荐 API；替代已弃用的 ReactDOM.render。
StrictMode：开发模式下帮助发现不安全生命周期、过时的 API 等；会故意双重调用部分函数（如部分 Effect）以暴露副作用问题，仅开发环境，不影响生产构建行为（见官方 StrictMode）。

函数组件

tsx

import { useState } from "react";

type CounterProps = {
  initial?: number;
};

export function Counter({ initial = 0 }: CounterProps) {
  const [count, setCount] = useState(initial);
  return (
    <button type="button" onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  );
}

类组件仍受支持，但新项目应使用函数组件 + Hooks（见 Hooks）。

核心概念速览

概念	说明
组件	可复用的 UI 单元；Props 只读，由父传入
State	组件内部可变数据；更新须用 `setState` / `dispatch`，触发重新渲染
单向数据流	数据自父向子通过 props 流动；子通过回调通知父
虚拟 DOM	React 在内存中计算 UI 树，再与真实 DOM 协调（见渲染）
Hooks	在函数组件中使用 state、副作用、Context 等的 API

常用生态（选配）

库	用途
React Router	客户端路由
Redux Toolkit	可预测的全局状态（复杂应用）
Zustand	轻量全局状态
TanStack Query	服务端状态 / 请求缓存
Vite	开发与构建（`@vitejs/plugin-react`）
Next.js	React 全栈 / SSR 框架（可选）

详见状态管理、路由、生态。

本目录学习路径

主题	文档
语法	jsx
组件	components
Hooks	state → effect → context → memo
全局状态	state
路由	router
渲染原理	rendering
性能	performance/build、runtime
工程	project、typescript、test

参考文献

以下链接在编写时均可正常访问：

资料	说明
React 官方文档	中文
React：安装	创建项目
React：思维模型	组件拆分