React 是用 JavaScript 编写的前端 UI 库,非 JS 原生部分,专注声明式 UI 渲染;核心概念包括 JSX、组件、Props、State 和虚拟 DOM,进阶需掌握 Effects、Refs、Context 与 Hooks,底层依赖扎实的 JavaScript 基础。

React 不是 JavaScript 的一部分,而是一个用 JavaScript 编写的前端 UI 库。它由 Meta(原 Facebook)开发和维护,核心目标是高效、声明式地构建用户界面。
React 是一个视图库,不是全功能框架
它只专注解决 UI 渲染问题,不内置路由、状态管理或 HTTP 请求能力。这意味着你需要额外搭配 React Router、Redux(或 Zustand)、Axios 等库来补足功能。这和 Vue、Angular 这类“开箱即用”的框架有本质区别。
React 的五大基础核心概念
JSX:一种语法扩展,让你在 JavaScript 中写类似 HTML 的结构。它不是字符串,最终会被编译成 React.createElement() 调用,生成轻量级的 JavaScript 对象——也就是虚拟 DOM 节点。
组件(Component):React 应用的基本单元。分为函数组件(主流,配合 Hooks 使用)和类组件(历史遗留)。组件可复用、可嵌套、可独立维护,体现“高内聚、低耦合”设计思想。
立即学习“Java免费学习笔记(深入)”;
Props(属性):父组件向子组件传递数据的只读通道。子组件不能修改 props,只能消费。这是 React 单向数据流的关键体现。
State(状态):组件内部可变的数据容器。函数组件通过 useState Hook 管理,类组件通过 this.state 和 this.setState。状态变化会触发组件重新渲染。
虚拟 DOM(Virtual DOM):React 在内存中维护的一份 UI 描述对象树。当状态更新时,React 生成新虚拟 DOM,与旧版做 Diff 对比,精准计算出最小变更集,再批量更新真实 DOM,大幅提升性能。
进阶但不可绕过的概念
- Effects(useEffect):处理副作用的标准方式,比如数据获取、订阅、手动 DOM 操作。它统一了类组件中的生命周期逻辑。
- Refs(useRef / createRef):用于访问 DOM 元素或保存跨渲染周期的可变值,不触发重渲染。
- Context(useContext):解决深层组件间 props 逐层透传的问题,适合主题、用户登录态等全局数据共享。
- Hooks:让函数组件具备状态和副作用能力的机制。除 useState、useEffect 外,还有 useMemo、useCallback、useReducer 等,是现代 React 开发的基石。
React 的底层逻辑依赖 JS 基础
React 组件本质就是 JavaScript 函数或类。如果你对 let/const 作用域、闭包(支撑 Hooks 内部状态保存)、变量提升、解构赋值、箭头函数等不熟悉,写 React 时容易写出难以调试的 bug。比如 useEffect 里的回调函数能“记住”上一次渲染的 state,靠的就是闭包。











