React 是一个由 Facebook 开发的专注于 UI 层的 JavaScript 库，通过组件化、声明式编程和虚拟 DOM 实现高效、可维护的界面开发；支持 JSX 语法、函数/类组件、状态管理及 Hooks 等核心特性。
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并开源。它不是全栈框架，只专注在 UI 层——把界面拆成独立、可复用的组件，再用声明式的方式描述状态变化时界面“应该长什么样”，而不是手动操作 DOM。
JSX：逻辑与结构写在一起
JSX 不是 HTML，也不是字符串，而是 React 元素的语法糖。它会被 Babel 编译成 React.createElement() 调用。比如：
Hello, {name}
→ React.createElement('h1', null, 'Hello, ', name)
关键点：
立即学习“Java免费学习笔记（深入）”；
- 必须引入 React（即使没显式调用，JSX 编译后仍依赖它）
- 表达式用 {} 包裹，不能写 if/for 语句，但可用三元、逻辑运算或提前计算
- 标签必须闭合，自闭合标签写成
，组件名首字母必须大写（
✅， ❌） - 默认防 XSS，内容会自动转义（{userInput} 是安全的）
组件：UI 的基本单元
组件是接受 props、返回 JSX 的函数或类，是 React 的核心抽象。所有界面都由组件组合而成。
两类主流写法：
- 函数组件：轻量、易测试，配合 Hooks 可管理状态和副作用（推荐方式）
- 类组件：有生命周期方法和 this.state，适合维护老项目，新代码一般不用
组件之间通过 props 传递数据，单向流动，父传子、不可逆改。例如：
状态与更新：驱动界面变化
组件内部的动态数据叫 state，用 useState（函数组件）或 this.setState（类组件）修改。每次 state 改变，React 自动触发重新渲染（re-render），但只更新变化的部分。
背后的机制依赖两个关键设计：
- 虚拟 DOM：内存中 JS 对象树，描述真实 DOM 结构；更新前先比对新旧虚拟 DOM 差异（Diff 算法），再批量最小化操作真实 DOM
- key 属性：列表渲染时必须为每个元素提供稳定、唯一、不乱序的 key，帮助 React 精准识别增删改，避免状态错位
Hooks：让函数组件也能处理复杂逻辑
Hooks 是函数组件“拥有状态”和“响应生命周期”的方式。最常用的是：
- useState：管理本地状态
- useEffect：处理副作用（如数据请求、订阅、DOM 操作）
- useContext：跨多层组件共享数据，替代繁琐的 props 逐层传递
- useMemo / useCallback：优化性能，避免重复计算或重渲染
Hooks 必须写在函数组件顶层，不能在条件或循环中调用，确保每次渲染调用顺序一致。
基本上就这些。React 的力量不在语法多炫，而在于用组件 + 声明式 + 虚拟 DOM 这套组合，把“界面随数据变化”这件事变得可预测、可拆分、可维护。
