用于diff功能的插件库～～react-diff-viewer

大家好～～我是一枚程序鱼🐟

最近发现一款专门用于diff的插件～react-diff-viewer。可支持的功能包括拆分视图、内联视图、单词差异、行高高亮等。当然它的高度也是可定制的。

使用步骤如下：

1.安装插件——yarn i react-diff-viewer or npm i react-diff-viewer

2.引入并使用：

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

完整代码如下：

import React from 'react';
import PropTypes from 'prop-types';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';

function DiffPanel({
  oldValue,
  newValue,
}) {
  const oldVerifyConf = JSON.stringify(oldValue, null, 2);
  const newVerifyConf = JSON.stringify(newValue, null, 2);


  const newStyles = {
    variables: {
      dark: {
        highlightBackground: '#fefed5',
        highlightGutterBackground: '#ffcd3c',
      },
    },
    line: {
      padding: '10px 2px',
      '&:hover': {
        background: '#a26ea1',
      },
    },
    contentText: {
      width: '390px',
    },
  };
  // const sameCode = React.useMemo(() => (
  //   newVerifyConf === oldVerifyConf
  // ), [newVerifyConf, oldVerifyConf]);
  // 折叠块显示内容
  const codeFoldMessageRenderer = React.useCallback(num => (
    newValue === oldValue ? '修改前后没有区别，点击展开查看' : `展开隐藏的 ${num} 行...`
  ), [newValue, oldValue]);
  return (
    <div className="am-diff-panel">
      <div className="panel-table">
        <p>修改前配置</p>
        <p>修改后配置</p>
      </div>
      <ReactDiffViewer
        oldValue={oldVerifyConf}
        newValue={newVerifyConf}
        styles={newStyles}
        codeFoldMessageRenderer={codeFoldMessageRenderer}
        splitView
        compareMethod={DiffMethod.LINES}
      />
    </div>
  );
}

DiffPanel.propTypes = {
  oldValue: PropTypes.object.isRequired,
  newValue: PropTypes.object.isRequired,
};
DiffPanel.defaultProps = {
};

export default DiffPanel;

更多属性和用法可参考：

react-diff-viewer - npmhttps://www.npmjs.com/package/react-diff-viewer在代码中，涉及到JSON.stringify()用法～～ 

在MDN文档中，有说明JSON.stringify是用于——把js对象或值转化为JSON格式的。那你清楚它的用法吗？

JSON.stringify(value[, replacer [, space]])；

JSON.stringify的参数有三个：

• value: 将要序列后成 JSON 字符串的值。
• replacer(可选)
  1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
  3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
• space(可选): 指定缩进用的空白字符串，用于美化输出
  1. 如果参数是个数字，它代表有多少的空格。上限为10。
  2. 该值若小于1，则意味着没有空格
  3. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格
  4. 如果该参数没有提供（或者为 null），将没有空格