是否应缓存lodash isEqual或选用更轻量的Prop对象比较方案？

这个场景我在做动画类组件的时候太熟悉了！每秒60次的isEqual调用确实会带来不少额外开销，下面给你几个从易到难、性价比很高的优化思路：

1. 最优解：让父组件缓存properties的引用 #

如果父组件每次传递properties时，能保证内容不变则引用不变，那子组件里完全不需要深度对比，直接判断引用是否相等就行：

shouldComponentUpdate(prevProps) {
  return prevProps.properties !== this.props.properties;
}

怎么实现？在父组件里：

• 类组件：把properties存在state里，只有当内容真正变化时才更新state（比如用isEqual判断后再setState）
• 函数组件：用useMemo包裹properties，依赖项设为里面的具体属性：

  const properties = useMemo(() => ({
    prop1: someValue,
    prop2: anotherValue,
    // ...其他属性
  }), [someValue, anotherValue]); // 这里的依赖是properties里的具体值
  

这样只有当依赖的属性变化时，才会生成新的properties对象，子组件的shouldComponentUpdate就能直接用引用对比，完全省去深度对比的开销。

2. 用浅对比替代深度对比 #

如果properties里的所有属性都是基本类型（字符串、数字、布尔等），那完全不需要用深度对比的isEqual，自己写个轻量的浅对比函数就行，速度会快很多：

function shallowEqual(objA, objB) {
  // 先判断引用是否相同
  if (Object.is(objA, objB)) return true;
  // 排除非对象/null的情况
  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }
  // 对比属性数量
  const keysA = Object.keys(objA);
  if (keysA.length !== Object.keys(objB).length) return false;
  // 逐个对比属性值
  for (const key of keysA) {
    if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
      return false;
    }
  }
  return true;
}

// 子组件里使用
shouldComponentUpdate(prevProps) {
  return !shallowEqual(prevProps.properties, this.props.properties);
}

这个函数只对比对象的第一层属性，没有深度递归，性能比isEqual提升非常明显，完全能覆盖你说的“最多20个基本类型属性”的场景。

3. 针对性对比关键属性 #

如果properties里不是所有属性都影响组件渲染，那可以只对比那些真正会触发UI变化的属性，不用全量对比。比如只有x、y、opacity这3个属性会影响动画，那直接对比这几个：

shouldComponentUpdate(prevProps) {
  const prev = prevProps.properties;
  const current = this.props.properties;
  return prev.x !== current.x || prev.y !== current.y || prev.opacity !== current.opacity;
}

这种方式的性能是最好的，因为只做了几次简单的基本类型对比，完全没有对象遍历的开销，唯一的缺点是需要你明确知道哪些属性是渲染相关的。

4. 缓存isEqual的结果（迫不得已时用） #

如果以上方案都没法用，必须用深度对比，那可以缓存isEqual的结果，避免重复计算相同的对比。比如用lodash的memoize自定义缓存逻辑，或者自己维护缓存：

import { isEqual, memoize } from 'lodash';

// 用JSON.stringify作为缓存key（注意：如果属性里有函数、Symbol等，JSON.stringify会忽略，要谨慎）
const memoizedIsEqual = memoize((a, b) => isEqual(a, b), (a, b) => `${JSON.stringify(a)}|${JSON.stringify(b)}`);

// 子组件里使用
shouldComponentUpdate(prevProps) {
  return !memoizedIsEqual(prevProps.properties, this.props.properties);
}

不过要注意：JSON.stringify本身也有开销，而且如果properties里有函数、循环引用等，JSON.stringify会出问题。另外要考虑缓存的内存占用，避免内存泄漏（比如可以设置缓存的过期时间，或者限制缓存的数量）。

总结一下优先级：父组件缓存引用 > 针对性对比关键属性 > 浅对比 > 缓存深度对比结果，根据你的实际场景选最适合的就行！

内容的提问来源于stack exchange，提问作者cubefox