当前位置：首页 > React

react实现代码对比

2026-01-27 16:26:52React

React 实现代码对比的方法

在 React 中实现代码对比功能，可以通过多种方式完成。以下是几种常见的方法：

使用现成的库（如 react-diff-viewer）

react-diff-viewer 是一个专门用于 React 的代码对比库，支持语法高亮和多种对比模式。

import React from 'react';
import ReactDiffViewer from 'react-diff-viewer';

const DiffViewer = () => {
  const oldCode = `const a = 10;
const b = 20;`;

  const newCode = `const a = 15;
const b = 20;`;

  return (
    <ReactDiffViewer
      oldValue={oldCode}
      newValue={newCode}
      splitView={true}
    />
  );
};

export default DiffViewer;

使用 Monaco Editor 的对比功能

Monaco Editor 是 VS Code 使用的编辑器，内置了强大的代码对比功能。

import React, { useEffect, useRef } from 'react';
import * as monaco from 'monaco-editor';

const DiffEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const originalModel = monaco.editor.createModel(
      'const a = 10;\nconst b = 20;',
      'javascript'
    );

    const modifiedModel = monaco.editor.createModel(
      'const a = 15;\nconst b = 20;',
      'javascript'
    );

    const diffEditor = monaco.editor.createDiffEditor(
      editorRef.current,
      {
        readOnly: true,
        automaticLayout: true,
      }
    );

    diffEditor.setModel({
      original: originalModel,
      modified: modifiedModel,
    });

    return () => {
      diffEditor.dispose();
      originalModel.dispose();
      modifiedModel.dispose();
    };
  }, []);

  return <div ref={editorRef} style={{ height: '400px' }} />;
};

export default DiffEditor;

使用 CodeMirror 的合并视图

CodeMirror 是另一个流行的代码编辑器，支持合并视图。

import React, { useEffect, useRef } from 'react';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { defaultHighlightStyle } from '@codemirror/highlight';
import { mergeView } from '@codemirror/merge';

const MergeEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const left = EditorState.create({
      doc: 'const a = 10;\nconst b = 20;',
      extensions: [defaultHighlightStyle],
    });

    const right = EditorState.create({
      doc: 'const a = 15;\nconst b = 20;',
      extensions: [defaultHighlightStyle],
    });

    const merge = mergeView({
      a: left,
      b: right,
      parent: editorRef.current,
    });

    return () => {
      merge.destroy();
    };
  }, []);

  return <div ref={editorRef} />;
};

export default MergeEditor;

自定义实现简单的对比功能

如果需要简单的对比功能，可以自行实现基于行的对比算法。

import React from 'react';

const SimpleDiff = ({ oldText, newText }) => {
  const oldLines = oldText.split('\n');
  const newLines = newText.split('\n');

  return (
    <div>
      {newLines.map((line, i) => {
        const oldLine = oldLines[i];
        const isChanged = oldLine !== line;

        return (
          <div key={i} style={{ 
            backgroundColor: isChanged ? '#ffcccc' : 'transparent',
            margin: '2px 0',
          }}>
            {line}
          </div>
        );
      })}
    </div>
  );
};

export default SimpleDiff;