React 是一个由 Facebook 开发的 JavaScript 库，用于构建快速响应的单页应用界面，核心是组件化开发与声明式 UI 更新；通过函数组件、JSX、useState 和 useEffect 实现状态管理与视图渲染。
React 是一个由 Facebook 开发的 JavaScript 库，专门用于构建快速、响应式的用户界面，尤其是单页应用（SPA）。它不强制你用整套框架，而是聚焦在“如何高效更新 UI”，核心思想是把界面拆成独立可复用的组件，数据变化时自动重新渲染相关部分。
组件：UI 的基本单元
React 中的界面由组件构成，每个组件管理自己的状态和行为。你可以用函数组件（推荐）或类组件定义，现代写法以 函数 + Hook 为主：
- 函数组件更简洁，配合
useState、useEffect等 Hook 管理状态和副作用 - 组件名必须大写（如
Header），JSX 中通过<header></header>调用 - 组件接收
props（只读属性）作为输入，返回 JSX 描述界面结构
JSX：像 HTML 一样的 JavaScript 语法
JSX 不是模板语言，而是 React.createElement() 的语法糖，让你用类似 HTML 的方式描述 UI 结构，但可以嵌入 JavaScript 表达式：
- 用花括号
{}插入变量、函数调用或条件逻辑（如{isLoading ? "加载中" : "完成"}） - 列表渲染必须加
key属性（通常用唯一 ID），帮助 React 高效追踪元素变化 - 样式可用内联对象（
style={{ color: "red" }}）或 CSS 模块/CSS-in-JS 方案
状态与数据流：驱动 UI 更新
用户交互或异步操作引发的数据变化，通过状态（state）触发界面重绘。React 保证更新是声明式的——你只需说明“UI 应该是什么样”，不用手动操作 DOM：
立即学习“Java免费学习笔记（深入）”；
-
useState管理组件内部状态（如表单输入、开关状态） -
useEffect处理副作用（如获取 API 数据、订阅事件），可控制执行时机（挂载/更新/卸载） - 父组件通过
props向子组件传数据，子组件通过回调函数（如onSubmit）向上传递事件
实际起步：创建一个简单计数器
新建一个函数组件，用 useState 存储数字，两个按钮分别调用 setCount 更新值，React 自动刷新显示：
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前数值：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
</div>
);
}
这就是 React 构建 UI 的最小闭环：定义组件 → 管理状态 → 描述视图 → 响应交互。
