↖ 项目笔记

项目笔记 03 / REACT-VIRTUALIZED-DIFF / 组件

浏览一份
10,000 行的 diff。

用一万行文件试试 react-virtualized-diff,包括左右对比和展开未修改的部分。

react-virtualized-diff组件介绍阅读约 2 分钟RSS ↗

嵌入现有审查工具的组件#

react-virtualized-diff 是一个 React 组件,可以把文本比较嵌入 Pull Request 页面、内部审查工具,或其他需要显示长文件的界面。它提供行号、并排与合并布局,以及可展开的未修改上下文。

组件对行进行虚拟化,避免让大文件中的每一行都一直挂载在页面上。它解决的是交互中的渲染开销;输入文本仍需经过比较,才能确定哪里发生了变化。

试用已发布的组件

120 行 → 10,000 行。同样的审查控件,更长的文件。

打开交互体验区 ↗

在体验区试试这三件事#

改变规模
选择 10,000 行,并关闭“只看改动”。滚动浏览完整文件,观察虚拟化列表的表现。
切换布局
在并排与合并视图之间切换。同样的改动,可以左右对照,也可以放在连续的一列中阅读。
展开上下文
重新开启“只看改动”,再展开一个未修改区块,查看改动附近的内容。

本站示例使用生成的文本,以及已发布的 react-virtualized-diff@0.1.6 包。可以直接在页面里操作。

集成与测量#

当前项目文档提供了 SimpleDiffViewer 来满足常见集成需求,也提供 DiffViewer / AdvancedDiffViewer 用于更深入的定制。进阶接口包括内容渲染器、行号回调、样式插槽与折叠提示渲染。

仓库还包含一套基准测试,在 1,000、10,000、50,000 和 100,000 行文本下比较四种 diff 组件,记录首屏渲染耗时、滚动帧率与 JavaScript 堆内存。这些结果对应报告中的测试环境;浏览器、设备或数据变化时,结果也可能不同。

基准测试报告中列出了测试环境和结果。

源码与延伸阅读#

组件源码与集成 API ↗基准报告与测试环境 ↗