01 / 项目详情
react-virtualized-diff
一个用于大文件的 React diff 组件，采用虚拟列表，支持展开上下文。
只渲染当前可见的行。
01 / 问题
渲染大文件的差异。
代码审查工具需要在文件变大时，仍然把改动展示清楚。如果每一行同时产生 DOM、布局与绘制工作，熟悉的双栏界面也会变得昂贵。
react-virtualized-diff 聚焦展示层：限定范围的滚动区域、虚拟化行，以及需要时可以展开的未修改上下文。
02 / 方法
只渲染当前可见的行。
组件支持并排与合并布局、可折叠上下文、行号交互和样式覆盖。通过 React API，现有产品提供文本，并决定审查界面如何融入自己的布局。
01
虚拟化行
将渲染集中在长文本比较中当前可见的部分。
02
可展开的上下文
折叠未修改区域，同时保留明确的展开入口。
03
React 接口
将主题、布局选项与审查交互集成到 React 产品中。
03 / 试一试
换个大文件试试。
体验区使用已发布的组件与生成的示例文本。可以比较 120 行和 10,000 行、切换布局、展开上下文，再滚动到底部。它使用的就是本站实际运行的渲染组件。
打开 diff 体验区仓库包含独立的基准测试工具和报告。体验区使用生成的示例文本，性能结果在报告中单独记录。