name	object-comparison
description	使用浅相等和深相等检查高效比较对象和数组。对于记忆化、变化检测和条件渲染至关重要。

对象比较技能

何时使用此技能

当你需要以下操作时使用此技能：

优化渲染（React：shouldComponentUpdate、useMemo）
检测数据变化 而无需深入检查
在变化检测中比较状态之前/之后
基于参数变化记忆函数结果
在反应系统中防止不必要的更新
在测试中验证数据相等

快速入门

import { shallowEqual } from '@x-oasis/shallow-equal';
import { shallowArrayEqual } from '@x-oasis/shallow-array-equal';
import { isClamped } from '@x-oasis/is-clamped';

// 浅对象比较
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };

shallowEqual(obj1, obj2); // false（b 引用不同对象）

// 浅数组比较
const arr1 = [1, 2, { x: 3 }];
const arr2 = [1, 2, { x: 3 }];

shallowArrayEqual(arr1, arr2); // false（同样的原因）

// 值范围检查
isClamped(5, 0, 10); // true
isClamped(15, 0, 10); // false

可用工具

函数	目的	速度	深?
`shallowEqual`	比较对象	⚡⚡	否
`shallowArrayEqual`	比较数组	⚡⚡	否
`isClamped`	检查范围	⚡⚡⚡	不适用
`layoutEqual`	比较布局	⚡	否

模式 1：浅相等

import { shallowEqual } from '@x-oasis/shallow-equal';

// 如果所有顶级值是 === 则对象相等
const user1 = { id: 1, name: 'John', tags: ['admin'] };
const user2 = { id: 1, name: 'John', tags: ['admin'] };

shallowEqual(user1, user2);
// false（tags 数组是不同引用）

// 但这是相等的：
const tagsArray = ['admin'];
const user3 = { id: 1, name: 'John', tags: tagsArray };
const user4 = { id: 1, name: 'John', tags: tagsArray };

shallowEqual(user3, user4); // true（相同 tags 引用）

真实例子：React 优化

import { memo } from 'react';
import { shallowEqual } from '@x-oasis/shallow-equal';

const UserCard = memo(
  ({ user }) => <div>{user.name}</div>,
  (prevProps, nextProps) => {
    // 如果道具相等返回 true（跳过重新渲染）
    return shallowEqual(prevProps, nextProps);
  }
);

模式 2：数组相等

import { shallowArrayEqual } from '@x-oasis/shallow-array-equal';

// 如果长度相同且所有元素是 === 则数组相等
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

shallowArrayEqual(arr1, arr2); // false（不同数组实例）

// 但：
const arr = [1, 2, 3];
const arr3 = arr;
const arr4 = arr;

shallowArrayEqual(arr3, arr4); // true（相同引用）

真实例子：React 中的依赖数组

import { useMemo } from 'react';
import { shallowArrayEqual } from '@x-oasis/shallow-array-equal';

function MyComponent({ items }) {
  const memoizedItems = useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);

  // 如果 items 数组浅相等则跳过重新计算
  // 即使使用相同的值重新创建 items
}

模式 3：范围检查

import { isClamped, clamp } from '@x-oasis/is-clamped';

// 检查值是否在范围 [min, max]
isClamped(50, 0, 100); // true
isClamped(150, 0, 100); // false
isClamped(-10, 0, 100); // false

// 或将值限制到范围
clamp(150, 0, 100); // 100
clamp(-10, 0, 100); // 0
clamp(50, 0, 100); // 50

真实例子：滑块/输入验证

import { isClamped, clamp } from '@x-oasis/is-clamped';

function handleSliderChange(value: number) {
  const valid = isClamped(value, MIN_VALUE, MAX_VALUE);

  if (!valid) {
    // 限制到有效范围
    value = clamp(value, MIN_VALUE, MAX_VALUE);
  }

  setValue(value);
}

模式 4：记忆化与相等

import { shallowEqual } from '@x-oasis/shallow-equal';

class MemoCache<T, R> {
  private cache: { args: T; result: R } | null = null;

  compute(args: T, fn: (args: T) => R): R {
    // 如果参数未改变（浅）则跳过
    if (this.cache && shallowEqual(this.cache.args, args)) {
      return this.cache.result;
    }

    const result = fn(args);
    this.cache = { args, result };
    return result;
  }
}

// 使用
const cache = new MemoCache();

const selector = (state) => state.user.name;

const result1 = cache.compute(
  { user: { name: 'John' } },
  selector
); // 已计算

const result2 = cache.compute(
  { user: { :  } }, 
  selector
);

模式 5：变化检测

import { shallowEqual } from '@x-oasis/shallow-equal';

class StateManager<T> {
  private state: T;
  private listeners: ((state: T) => void)[] = [];

  constructor(initial: T) {
    this.state = initial;
  }

  setState(newState: T) {
    // 仅在实际改变时通知（浅检查）
    if (!shallowEqual(this.state, newState)) {
      this.state = newState;

      // 通知所有监听器
      this.listeners.forEach(listener => listener(this.state));
    }
  }

  subscribe(listener: (state: T) => void) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter( => l !== listener);
    };
  }

  () {
     .;
  }
}


 store =  ({ :  });

store.( {
  .(, state);
});

store.({ :  }); 
store.({ :  });

模式 6：条件渲染

import { shallowEqual } from '@x-oasis/shallow-equal';

function UserProfile({ previousUser, currentUser }) {
  if (shallowEqual(previousUser, currentUser)) {
    return <p>无改变</p>;
  }

  return (
    <div>
      <h2>用户已改变！</h2>
      {currentUser.name !== previousUser.name && (
        <p>名称：{previousUser.name} → {currentUser.name}</p>
      )}
      {currentUser.email !== previousUser.email && (
        <p>邮箱：{previousUser.email} → {currentUser.email}</p>
      )}
    </div>
  );
}

模式 7：深相等（手动）

import { shallowEqual } from '@x-oasis/shallow-equal';

// 对于需要深相等的情况
function deepEqual<T>(a: T, b: T): boolean {
  if (a === b) return true;

  if (typeof a !== 'object' || typeof b !== 'object') {
    return false;
  }

  if (a === null || b === null) {
    return false;
  }

  // 先检查浅（快速路径）
  if (!shallowEqual(a, b)) {
    return false;
  }

  // 如果浅相等，检查嵌套对象
  for (const key in a) {
    if (!deepEqual(a[key], b[key])) {
      return false;
    }
  }

  return true;
}

// 使用
deepEqual(
  { a: 1, b: { c: 2 } },
  { a: 1, b: { c: 2 } }
); // true（深相等）

模式 8：不重新渲染时选择

import { selectValue } from '@x-oasis/select-value';
import { shallowEqual } from '@x-oasis/shallow-equal';

function useSelectorOptimized<T, S>(
  state: T,
  selector: (state: T) => S
) {
  const [selected, setSelected] = useState<S | undefined>();

  useEffect(() => {
    const newSelected = selector(state);

    // 仅在选中值改变时更新
    if (!shallowEqual(selected, newSelected)) {
      setSelected(newSelected);
    }
  }, [state, selector]);

  return selected;
}

// 使用：仅当 user.name 改变时组件重新渲染
function UserName({ userId }) {
  const user = useSelectorOptimized(
    store.getState(),
    state => ({ name: state.users[userId]?.name })
  );

  return <div>{user?.name}</div>;
}

最佳实践

✅ 做法

// 为性能关键代码使用浅相等
if (shallowEqual(prevData, newData)) {
  return; // 跳过重新渲染
}

// 与实际值组合以获得精确改变
if (shallowEqual(props, prevProps)) {
  // 道具未改变（浅）
  return prevResult;
}

// 使用 clamp 进行 UI 约束
const value = clamp(userInput, MIN, MAX);

// 创建记忆化选择器
const getActiveUsers = (state) => {
  return state.users.filter(u => u.active);
};

❌ 不做法

// 不要对深嵌套对象使用浅相等
const equal = shallowEqual(
  { a: { b: { c: 1 } } },
  { a: { b: { c: 1 } } }
); // false！（嵌套对象不同）

// 不要用对象比较数组
shallowEqual([1, 2], [1, 2]); // 可能失败

// 不要假设浅相等处理所有情况
// 有时你需要深相等

常见陷阱

陷阱 1：混淆浅 vs 深

// ❌ 浅不检查嵌套值
const obj1 = { user: { id: 1 } };
const obj2 = { user: { id: 2 } }; // 不同 id！

shallowEqual(obj1, obj2); // false（相同对象引用）
// 但如果 user.id 不同！

// ✅ 使用深相等或检查特定属性
if (obj1.user.id !== obj2.user.id) {
  // 处理改变
}

陷阱 2：数组 vs 对象比较

// ❌ 混合比较
const result = shallowEqual(
  [1, 2, 3],
  { 0: 1, 1: 2, 2: 3 }
); // 可能给出意外结果

// ✅ 使用适当的函数
const arrayResult = shallowArrayEqual([1, 2], [1, 2]);
const objectResult = shallowEqual({ a: 1 }, { a: 1 });

陷阱 3：记忆化失效

// ❌ 每次渲染创建新对象
function MyComponent(props) {
  const config = { timeout: 1000 }; // 每次新对象！

  return (
    <Child
      config={config}
      onChange={handleChange}
    />
  );
}
// 子看到 config 总是改变

// ✅ 记忆化 config
const DEFAULT_CONFIG = { timeout: 1000 };

function MyComponent(props) {
  return (
    <Child
      config={DEFAULT_CONFIG}
      onChange={handleChange}
    />
  );
}

object-comparison

معلومات المصدر

خيارات التثبيت

مراجعة ملفات المصدر

المزيد من هذا المستودع

المزيد من هذا المستودع

对象比较技能

何时使用此技能

快速入门

可用工具

模式 1：浅相等

模式 2：数组相等

模式 3：范围检查

模式 4：记忆化与相等

模式 5：变化检测

模式 6：条件渲染

模式 7：深相等（手动）

模式 8：不重新渲染时选择

最佳实践

✅ 做法

❌ 不做法

常见陷阱

陷阱 1：混淆浅 vs 深

陷阱 2：数组 vs 对象比较

陷阱 3：记忆化失效

参考资料

对象比较技能

何时使用此技能

快速入门

可用工具

模式 1：浅相等

模式 2：数组相等

模式 3：范围检查

模式 4：记忆化与相等

模式 5：变化检测

模式 6：条件渲染

模式 7：深相等（手动）

模式 8：不重新渲染时选择

最佳实践

✅ 做法

❌ 不做法

常见陷阱

陷阱 1：混淆浅 vs 深

陷阱 2：数组 vs 对象比较

陷阱 3：记忆化失效

参考资料