Merge pull request #474 from webzard-io/feat/slotprops-memo

Use shallowCompare to compare slotProps

.cz-config.js

@@ -30,7 +30,7 @@ module.exports = {
       name: '🚧 Updating grunt tasks etc; no production code change.',
     },
     {
-      value: 'pref',
+      value: 'perf',
       name: '⚡️ Improving the performance.',
     },
     {

packages/runtime/src/components/_internal/ImplWrapper/ImplWrapper.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImplWrapperProps } from '../../../types';
-import { shallowCompareArray } from '@sunmao-ui/shared';
+import { shallowCompare } from '@sunmao-ui/shared';
 import { UnmountImplWrapper } from './UnmountImplWrapper';
 
 export const ImplWrapper = React.memo<ImplWrapperProps>(
@@ -13,15 +13,16 @@ export const ImplWrapper = React.memo<ImplWrapperProps>(
     let isEqual = false;
 
     if (prevChildren && nextChildren) {
-      isEqual = shallowCompareArray(prevChildren, nextChildren);
+      isEqual = shallowCompare(prevChildren, nextChildren);
     } else if (prevChildren === nextChildren) {
       isEqual = true;
     }
+
     return (
       isEqual &&
       prevComponent === nextComponent &&
       // TODO: keep ImplWrapper memorized and get slot props from store
-      prevProps.slotProps === nextProps.slotProps
+      shallowCompare(prevProps.slotProps, nextProps.slotProps)
     );
   }
 );

packages/shared/__tests__/shallowCompare.spec.ts

@@ -0,0 +1,17 @@
+import { shallowCompare } from '../src/utils';
+
+describe('shallowCompare function', () => {
+  it('compare values', () => {
+    expect(shallowCompare(undefined, undefined)).toBe(true);
+    expect(shallowCompare(0, 0)).toBe(true);
+    expect(shallowCompare(0, false)).toBe(false);
+    expect(shallowCompare(undefined, {})).toBe(false);
+    expect(shallowCompare({}, {})).toBe(true);
+    expect(shallowCompare({ a: 1 }, { a: 1 })).toBe(true);
+    expect(shallowCompare({ a: 1 }, { a: 1, b: 1 })).toBe(false);
+    expect(shallowCompare({ a: undefined }, { b: undefined })).toBe(false);
+    expect(shallowCompare([], [])).toBe(true);
+    expect(shallowCompare([1, 2, 3, 4], [1, 2, 3, 4])).toBe(true);
+    expect(shallowCompare([1, 2, 3, 4], [1, 2, 3, 4, 5])).toBe(false);
+  });
+});

packages/shared/src/utils/array.ts

@@ -1,7 +0,0 @@
-export function shallowCompareArray<T>(arr1: Array<T>, arr2: Array<T>): boolean {
-  if (arr1.length !== arr2.length) return false;
-  for (const i in arr1) {
-    if (arr1[i] !== arr2[i]) return false;
-  }
-  return true;
-}

packages/shared/src/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './array';
 export * from './number';
 export * from './spec';
 export * from './expression';

packages/shared/src/utils/object.ts

@@ -27,3 +27,18 @@ export function traverse(value: unknown, seen: Set<unknown> = new Set()) {
 export function isPromise(value: object): value is Promise<unknown> {
   return value instanceof Promise;
 }
+
+export function shallowCompare(obj1: any, obj2: any) {
+  if (typeof obj1 === 'object' && typeof obj2 === 'object') {
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) return false;
+    for (const key in obj1) {
+      if (key in obj2 && obj1[key] === obj2[key]) {
+        continue;
+      } else {
+        return false;
+      }
+    }
+    return true;
+  }
+  return obj1 === obj2;
+}