React 技术栈总览

一句话定位：React 是「组件化 + JSX + 单向数据流 + 虚拟 DOM」的前端 UI 库，配套 React Router（路由）、Redux（状态）、Axios（请求）构成全家桶；与 Vue 最大的区别是没有自动响应式——状态更新靠显式 setState（或 Hook 的 setter）触发，配合不可变数据 + Diff 算法做最小化 DOM 更新。

组件栈地图

层	组件	职责
核心	React	JSX + 组件 + 虚拟 DOM + Diff + Hook（useState/useEffect）
状态	Redux（或 Context / Zustand）	跨组件共享状态（store/reducer/action）
路由	React Router	URL ↔ 视图映射（Routes/Route/useNavigate）
请求	Axios	HTTP 客户端（拦截器/超时/取消）
构建	create-react-app / Vite	脚手架

React vs Vue 完整对比

维度	React	Vue
响应式	手动 setState / setter 触发	自动 Proxy/defineProperty 监听
组件	JSX（函数/类组件）	单文件组件（template + script）
数据流	单向（props 只读）	单向（v-model 是语法糖）
状态管理	Redux / Context	Pinia / Vuex
逻辑复用	Hook（函数组件）	组合式 API（setup）
列表渲染	map + 显式 key	v-for + :key
性能优化	PureComponent/memo + 不可变数据	编译器自动优化（无需手动）

学习路径（对应素材系列 18 篇）

JSX 语法 → 脚手架 → 组件化 → 父子/非父子通信 → setState → 受控非受控 → 高阶组件 → CSS/AntDesign/动画 → Redux（初见/react-redux/中间件/state 管理）→ Hook → Router → axios

不变量（必须成立的约束）

• 单向数据流：父 → 子靠 props，子改父状态靠回调函数，props 只读。
• 状态更新必须走 setState / Hook setter，直接改 state 不会触发渲染。
• 组件名大写开头（JSX 靠大小写区分组件与 HTML 标签）。

常见误解

• 以为 React 也像 Vue 一样自动响应式 → React 没有数据监听，改 state 必须显式触发。
• 以为 setState 后能立即读到新值 → 异步批量更新，需回调或 componentDidUpdate。

关联

• 组件化：概念卡片：React组件化与JSX
• 状态：概念卡片：React状态管理与setState
• Hook：概念卡片：ReactHook
• Redux：概念卡片：Redux状态管理
• 路由：概念卡片：ReactRouter路由机制
• 对标的 Vue3：Vue3技术栈总览