improve performance

MrWangJustToDo · Dec 12, 2024 · ce2df33 · ce2df33
1 parent 7af6cd9
commit ce2df33
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 80 deletions.
diff --git a/packages/react/src/components/DiffSplitWidgetLineNormal.tsx b/packages/react/src/components/DiffSplitWidgetLineNormal.tsx
@@ -10,23 +10,38 @@ import { useDiffWidgetContext } from "./DiffWidgetContext";
 import type { DiffFile } from "@git-diff-view/core";
 
 const _DiffSplitWidgetLine = ({
-  diffFile,
+  index,
   side,
+  diffFile,
   lineNumber,
-  currentLine,
-  setWidget,
-  currentWidget,
 }: {
   index: number;
   side: SplitSide;
   diffFile: DiffFile;
   lineNumber: number;
-  currentLine: ReturnType<DiffFile["getSplitLeftLine"]>;
-  currentWidget: boolean;
-  setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
 }) => {
+  const { useWidget } = useDiffWidgetContext();
+
   const { useDiffContext } = useDiffViewContext();
 
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
+  const currentLine = side === SplitSide.old ? oldLine : newLine;
+
+  const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+
   const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
 
   const currentWidgetRendered =
@@ -86,8 +101,8 @@ const _DiffSplitWidgetLine = ({
 // TODO! improve performance
 export const DiffSplitWidgetLine = ({
   index,
-  diffFile,
   side,
+  diffFile,
   lineNumber,
 }: {
   index: number;
@@ -97,37 +112,33 @@ export const DiffSplitWidgetLine = ({
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
-  const { widgetLineNumber, widgetSide, setWidget } = useWidget.useShallowStableSelector((s) => ({
-    widgetLineNumber: s.widgetLineNumber,
-    widgetSide: s.widgetSide,
-    setWidget: s.setWidget,
-  }));
+  const currentIsShow = useWidget.useShallowSelector(
+    React.useCallback(
+      (s) => {
+        const widgetLineNumber = s.widgetLineNumber;
 
-  const oldLine = diffFile.getSplitLeftLine(index);
+        const widgetSide = s.widgetSide;
 
-  const newLine = diffFile.getSplitRightLine(index);
+        const oldLine = diffFile.getSplitLeftLine(index);
 
-  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLine = diffFile.getSplitRightLine(index);
 
-  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const oldLineWidget =
+          oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
 
-  const currentLine = side === SplitSide.old ? oldLine : newLine;
+        const newLineWidget =
+          newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
 
-  const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+        const currentIsShow = oldLineWidget || newLineWidget;
 
-  const currentIsShow = oldLineWidget || newLineWidget;
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
+  );
 
   if (!currentIsShow) return null;
 
-  return (
-    <_DiffSplitWidgetLine
-      index={index}
-      diffFile={diffFile}
-      side={side}
-      lineNumber={lineNumber}
-      currentLine={currentLine}
-      setWidget={setWidget}
-      currentWidget={currentWidget}
-    />
-  );
+  return <_DiffSplitWidgetLine index={index} side={side} diffFile={diffFile} lineNumber={lineNumber} />;
 };
diff --git a/packages/react/src/components/DiffSplitWidgetLineWrap.tsx b/packages/react/src/components/DiffSplitWidgetLineWrap.tsx
@@ -11,14 +11,10 @@ const _DiffSplitWidgetLine = ({
   index,
   diffFile,
   lineNumber,
-  oldLineWidget,
-  newLineWidget,
 }: {
   index: number;
   diffFile: DiffFile;
   lineNumber: number;
-  oldLineWidget: boolean;
-  newLineWidget: boolean;
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
@@ -32,6 +28,14 @@ const _DiffSplitWidgetLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
   const oldWidgetRendered =
     oldLineWidget &&
     renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) });
@@ -90,30 +94,33 @@ export const DiffSplitWidgetLine = ({
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
-  const { widgetLineNumber, widgetSide } = useWidget((s) => ({
-    widgetLineNumber: s.widgetLineNumber,
-    widgetSide: s.widgetSide,
-  }));
+  const currentIsShow = useWidget.useShallowSelector(
+    React.useCallback(
+      (s) => {
+        const widgetLineNumber = s.widgetLineNumber;
 
-  const oldLine = diffFile.getSplitLeftLine(index);
+        const widgetSide = s.widgetSide;
 
-  const newLine = diffFile.getSplitRightLine(index);
+        const oldLine = diffFile.getSplitLeftLine(index);
 
-  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+        const newLine = diffFile.getSplitRightLine(index);
 
-  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+        const oldLineWidget =
+          oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
 
-  const currentIsShow = oldLineWidget || newLineWidget;
+        const newLineWidget =
+          newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
 
-  if (!currentIsShow) return null;
+        const currentIsShow = oldLineWidget || newLineWidget;
 
-  return (
-    <_DiffSplitWidgetLine
-      index={index}
-      diffFile={diffFile}
-      lineNumber={lineNumber}
-      oldLineWidget={oldLineWidget}
-      newLineWidget={newLineWidget}
-    />
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
   );
+
+  if (!currentIsShow) return null;
+
+  return <_DiffSplitWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
 };
diff --git a/packages/react/src/components/DiffUnifiedWidgetLine.tsx b/packages/react/src/components/DiffUnifiedWidgetLine.tsx
@@ -10,22 +10,30 @@ import type { DiffFile } from "@git-diff-view/core";
 const _DiffUnifiedWidgetLine = ({
   index,
   diffFile,
-  oldWidget,
-  newWidget,
   lineNumber,
-  setWidget,
 }: {
   index: number;
   diffFile: DiffFile;
-  oldWidget: boolean;
-  newWidget: boolean;
   lineNumber: number;
-  setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
 }) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
   const unifiedItem = diffFile.getUnifiedLine(index);
 
   const onClose = () => setWidget({});
 
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const oldWidget =
+    unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+
+  const newWidget =
+    unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+
   const { useDiffContext } = useDiffViewContext();
 
   // 需要显示的时候才进行方法订阅，可以大幅度提高性能
@@ -65,32 +73,31 @@ export const DiffUnifiedWidgetLine = ({
 }) => {
   const { useWidget } = useDiffWidgetContext();
 
-  const { widgetSide, widgetLineNumber, setWidget } = useWidget.useShallowStableSelector((s) => ({
-    widgetLineNumber: s.widgetLineNumber,
-    widgetSide: s.widgetSide,
-    setWidget: s.setWidget,
-  }));
+  const currentIsShow = useWidget.useShallowSelector(
+    React.useCallback(
+      (s) => {
+        const widgetLineNumber = s.widgetLineNumber;
 
-  const unifiedItem = diffFile.getUnifiedLine(index);
+        const widgetSide = s.widgetSide;
 
-  const oldWidget =
-    unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+        const unifiedItem = diffFile.getUnifiedLine(index);
 
-  const newWidget =
-    unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+        const oldWidget =
+          unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
 
-  const currentIsShow = oldWidget || newWidget;
+        const newWidget =
+          unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
 
-  if (!currentIsShow) return null;
+        const currentIsShow = oldWidget || newWidget;
 
-  return (
-    <_DiffUnifiedWidgetLine
-      index={index}
-      diffFile={diffFile}
-      lineNumber={lineNumber}
-      oldWidget={oldWidget}
-      newWidget={newWidget}
-      setWidget={setWidget}
-    />
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
   );
+
+  if (!currentIsShow) return null;
+
+  return <_DiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
 };