嵌入现有审查工具的组件#
react-virtualized-diff 是一个 React 组件,可以把文本比较嵌入 Pull Request 页面、内部审查工具,或其他需要显示长文件的界面。它提供行号、并排与合并布局,以及可展开的未修改上下文。
组件对行进行虚拟化,避免让大文件中的每一行都一直挂载在页面上。它解决的是交互中的渲染开销;输入文本仍需经过比较,才能确定哪里发生了变化。
在体验区试试这三件事#
- 改变规模
- 选择 10,000 行,并关闭“只看改动”。滚动浏览完整文件,观察虚拟化列表的表现。
- 切换布局
- 在并排与合并视图之间切换。同样的改动,可以左右对照,也可以放在连续的一列中阅读。
- 展开上下文
- 重新开启“只看改动”,再展开一个未修改区块,查看改动附近的内容。
本站示例使用生成的文本,以及已发布的 react-virtualized-diff@0.1.6 包。可以直接在页面里操作。
集成与测量#
当前项目文档提供了 SimpleDiffViewer 来满足常见集成需求,也提供 DiffViewer / AdvancedDiffViewer 用于更深入的定制。进阶接口包括内容渲染器、行号回调、样式插槽与折叠提示渲染。
仓库还包含一套基准测试,在 1,000、10,000、50,000 和 100,000 行文本下比较四种 diff 组件,记录首屏渲染耗时、滚动帧率与 JavaScript 堆内存。这些结果对应报告中的测试环境;浏览器、设备或数据变化时,结果也可能不同。
基准测试报告中列出了测试环境和结果。