React 组件性能开发短记：延迟与成本怎么记

React 组件性能开发短记：延迟与成本怎么记

RAG 对话的体验由检索、模型响应、网络传输和前端渲染共同决定；成本还取决于上下文长度、缓存命中和请求策略。不要把某个固定时延或 Token 数量当成所有系统的结论。

拆开测量链路

为一次请求记录检索、模型、首个片段、完整响应和前端渲染的耗时，并将这些数据与模型、提示词版本和缓存状态关联。日志中不要写入完整用户问题或敏感上下文。

限制不必要的 React 更新

流式输出时，把正在变化的消息状态限制在尽可能小的组件边界内；稳定的历史消息可通过稳定 props、memo或虚拟列表减少重复工作。是否使用useMemo、useCallback需要用 Profiler 证明收益，不能作为默认装饰。

const Message = React.memo(function Message({ text }: { text: string }) { return <article>{text}</article>; });

Context 适合共享相对稳定的数据。高频变化的流式文本不宜放进会让整棵树重复订阅的全局 Context；可以拆分 Provider 或改为局部状态，具体选择取决于组件关系。

缓存与成本控制

缓存前先定义失效条件、权限边界和命中后是否仍需请求服务端。语义缓存还要评估误命中带来的回答偏差；对不确定的匹配，应回退到正常检索流程。

建议在相同流量样本与配置下比较：端到端时延分布、渲染提交次数、缓存命中率、上下文长度和每次请求成本。保留采样方法和时间范围，才能判断优化是否真的改善了延迟或开销。