react-diff-viewer -- 代码diff工具

一、先上效果图

二、上代码

下载依赖包

pnpm install react-diff-viewer@3.1.1

import { Row, Col } from 'antd';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';

//props接收新旧值
export default function diffModel({ oldData , newData }:any) {
    
  //把数据转化成JSON字符串的形式
  //因为数据转化成字符串后会堆积成一行，这里封装一个格式化的函数
  const toJsonStr=(value:any) => {
    const result = JSON.stringify(value)
                       .replaceAll(',', ',\n')
                       .replaceAll('{', '{\n')
                       .replaceAll('}', '\n}')
                       .replaceAll('\\', '');
    //清除两边的引号
    return result.slice(1, result.length - 1)
  }

  //获取格式化后的JSON数据
  const oldVerifyConf = toJsonStr(oldData)
  const newVerifyConf = toJsonStr(newData)

  //样式
  const newStyles = {
    variables: {
      dark: {
        highlightBackground: '#fefed5',
        highlightGutterBackground: '#ffcd3c',
      },
    },
    line: {
      padding: '10px 2px',
      '&:hover': {
        background: '#a26ea1',
      },
    },
    contentText: {
      width: '390px',
    },
  };

  return (
     <Row>
       <Col span={12}>
         <p>旧值</p>
       </Col>
       <Col span={12}>
         <p>新值</p>
       </Col>
       <Col span={24}>
         <ReactDiffViewer
           oldValue={oldVerifyConf}
           newValue={newVerifyConf}
           styles={newStyles}
           splitView
           compareMethod={DiffMethod.LINES}
           showDiffOnly={false}//对比结果相同是是否隐藏(true隐藏false不隐藏)
           codeFoldMessageRenderer={(num) => <>展开隐藏的 {num} 行...</>}
         />
       </Col>
     </Row>
  );
}

三、ReactDiffViewer属性

属性名	类型	默认值	介绍
oldValue	string	''	字符串形式的旧值
newValue	string	''	字符串形式的新值
splitView	boolean	true	在统一视图和拆分视图之间切换
disableWordDiff	boolean	false	在差异行中显示和隐藏单词差异
compareMethod	DiffMethod	DiffMethod.CHARS	用于区分字符串的JsDiff文本diff方法。查看指南以使用不同的方法
hideLineNumbers	boolean	false	显示和隐藏行号
renderContent	function	undefined	渲染Prop API以在diff查看器中渲染代码。有助于语法突出显示，参考文档
onLineNumberClick	function	undefined	行号单击的事件处理程序 (lineId: string) => void
highlightLines	array[string]	[]	要高亮显示的行列表。与onLineNumberClick配合使用。对于diff查看器的左侧和右侧部分，行号分别以L和R作为前缀。例如，L-20表示左侧窗格中的第20行。要高亮显示一系列行号，请将带前缀的行号作为数组传递。例如，[L-2，L-3，L-4，L-5]将突出显示左侧窗格中的2-5行
showDiffOnly	boolean	true	仅显示不同的行并折叠未更改的行
extraLinesSurroundingDiff	number	3	围绕diff的额外未更改行数。与showDiffOnly一起使用
codeFoldMessageRenderer	function	Expand {number} of lines ...	呈现Prop API以呈现代码折叠消息
styles	object	{}	替代样式变量和样式。了解有关替代样式的详细信息
useDarkTheme	boolean	true	启用/禁用深色主题
leftTitle	string	undefined	拆分视图中差异左侧部分的列标题。这将用作内联视图中的唯一标题
rightTitle	string	undefined	拆分视图中差异右侧部分的列标题。这将在内联视图中被忽略
linesOffset	number	0	开始计数代码行的编号

四、关于数据量过大问题

1. 数据处理的角度 

让后段同学在数据中保留换行符、空格符号等，避免前端处理数据。

2. 渲染的角度

使用ReactDiffViewer的showDiffOnly属性，仅显示不同的行并折叠未更改的行。