主题
React + AI 应用开发
React 如何实现结构化输出驱动的动态 UI？
结构化输出的价值是把自然语言变成受控数据，但 schema、版本、部分结果和权限仍需要前端工程治理。
面试官想考什么
- 为什么不用解析模型返回的 Markdown？ 考察可靠性边界。
- 模型返回的 JSON 还需要校验吗？ 考察信任边界。
- 如何把类型映射成 React 组件？ 考察动态 UI 架构。
- schema 升级后旧消息怎么办？ 考察版本兼容与迁移。
一句话回答
text
结构化输出只解决模型格式约束，不等于可信数据；前端仍要按版本 schema 校验和归一化，再通过受控 registry 映射组件，部分结果显示占位态，未知类型安全降级并保留可观测性。面试回答详解
1. 数据链路
text
模型输出 -> JSON parse -> schema validate
-> normalize/version migrate -> component registry -> React UI可以使用 JSON Schema、Zod 等运行时校验工具。TypeScript 类型只在编译期有效，不能替代运行时检查。
2. Registry 设计
ts
const registry = {
weather_card: WeatherCard,
action_list: ActionList,
citation_list: CitationList,
} as const组件选择来自受控 key，不能让模型传入任意 import 路径、组件名或可执行代码。每个组件只接收自己 schema 校验过的 props。
3. 部分结果
流式 JSON 可能暂时不完整。方案包括：
- 服务端只在对象完整后发送
ui.completed。 - 使用支持增量对象的协议，前端把字段状态标记为 partial。
- 对关键字段显示 skeleton，校验失败时回退为文本。
不能把半截 JSON 直接交给业务组件，尤其是金额、权限动作和表单默认值。
4. 版本和回退
每个 payload 带 schemaVersion。新客户端可以迁移旧版本；无法识别的版本显示原始答案或通用错误，不应白屏。组件 registry 需要支持 feature flag 和灰度，便于撤回某个模型模板。
5. 业务风险
结构化字段仍可能包含越权动作、恶意 URL 或不符合业务约束的数值。前端校验负责体验，服务端必须重新校验权限和业务规则。结构化 UI 生成后要记录 schema 版本、校验失败字段、渲染耗时和用户点击结果。
可直接背诵的 30 秒回答
text
我把 structured output 当作更可靠的输入格式，而不是可信数据。收到后先做 JSON 解析、运行时 schema 校验、版本迁移和业务归一化，再用受控 registry 映射到 React 组件。部分结果显示占位或降级文本，未知 schema 不能让页面崩溃，所有动作还要由服务端重新鉴权。扩展知识
结构化输出和函数调用的区别
- 结构化输出：约束模型给出的数据形状。
- 函数调用：模型提出调用某个工具及参数，是否执行需要独立的权限和审批流程。
面试官追问链
追问一：Zod 校验通过就安全吗？
- 考察点：格式与安全边界。
- 回答方向：不安全。还要校验 URL、长度、权限、业务范围和工具参数；服务端不能信任浏览器校验。
追问二：未知组件类型怎么处理？
- 考察点：容错设计。
- 回答方向：保留文本或 JSON 摘要，记录 telemetry，必要时按 schema 版本回退；不能动态执行未知代码。
追问三：为什么不让模型直接生成 JSX？
- 考察点：架构判断。
- 回答方向：会扩大执行和安全面，难以测试、缓存、审计和版本化。受控 schema + registry 更适合生产系统。