React
React 是用组件构建用户界面的 JavaScript 库。它让你把页面拆成可复用的部分，并在数据变化时更新界面；比如聊天工具收到新消息后，消息列表会随之变化。
你可能会说：「我想做个聊天页面，新消息来了列表能更新，输入框和消息卡片也方便复用。」
读之前建议先了解
动手看看设计群收到新消息
拖动新消息数量，看看列表和未读计数如何一起变化；拖回 0 就是重置。悬停任意消息，还能看到统一的高亮反馈。
虚线标出了会话头、消息列表和未读徽标的组件边界。组件可以嵌套，每条消息也能复用同一种消息组件，只传入不同内容。
新消息出现时，未读数也跟着增加。真实 React 中，两处界面可以来自同一份状态数据，不必分别手动修改页面元素。
这里用参数和 CSS 规则模拟数据更新；React 本身是 JavaScript 界面库，不是这些样式。它根据组件与数据描述更新界面。
要点React 怎样把数据变成界面？
- 1
把页面拆成可复用组件
你可以把聊天页拆成消息列表、消息卡片和输入区。每个组件负责自己的一块界面，组合起来就是完整页面。这样改消息卡片的样式时，不必在每个使用它的地方重复修改。
- 2
用数据描述当前该显示什么
组件接收数据，并根据数据描述界面。例如，消息卡片收到发送者和正文，就显示对应内容。你告诉 React 当前界面应该是什么样，它负责把变化反映到页面上。
- 3
用状态处理会变化的内容
输入框文字、当前选中的标签页，都可能随着操作改变。你把这类数据放进状态；状态变化后，React 会重新计算相关组件的界面。这样你主要处理数据变化，而不是逐个查找页面元素去改。
容易混淆的地方
React 负责构建界面，本身不包办路由、数据存储和后端服务；Next.js 则在 React 之上提供搭建完整网站的更多能力。它和 Vue 都能做组件化界面，但组件写法和状态处理方式不同。让 AI 写代码前，先确认项目用的是哪一个。
什么时候用
适合用
- 做 AI 聊天工具时，消息列表、输入区和加载提示会随交互变化，适合拆成 React 组件。
- 做管理后台时，多张表格、筛选区和弹窗需要共享界面结构，可以用组件复用。
- 做有多个交互步骤的网站时，表单内容要随用户输入变化，可以用状态管理当前界面。
不适合用
- 只做一张几乎不变的活动介绍页，且没有交互需求时，直接用 HTML 和 CSS 更省事。
- 需要写数据库查询或用户权限校验时，React 不能代替后端；把这些逻辑交给后端服务。
- 已有 Vue 项目只想新增一个普通页面时，沿用 Vue 通常比单独引入 React 更合适。
练一练选一个答案，看看解释
你在做一个 AI 聊天工具：用户发送消息后，列表要新增消息，发送按钮在请求期间要显示加载状态。你会怎样向 AI 说明前端实现？
让 AI 帮你做复制给 AI Agent 直接用
请用 React 实现一个聊天页面，把消息列表、消息卡片和输入区拆成组件。用状态保存消息、输入内容和发送中的状态；发送后更新列表，并显示加载与失败提示。先说明组件之间如何传递数据，再写代码。