如何在componentDidUpdate中比较对象数组类型children并按需执行代码

嘿，你的思路其实已经找对方向了！针对对象数组类型的children，用_.isEqual来做深比较是完全可行的，但这里还有几个细节和替代方案值得聊聊：

为什么你的初始写法是可行的？ #

React默认的浅比较（===）只会对比数组的引用——哪怕两个数组里的对象内容完全一致，只要是新生成的数组（比如父组件每次渲染都返回[{name: 'a'}, {name: 'b'}]），prevProps.children === this.props.children都会返回false。而_.isEqual会递归遍历数组里的每个对象，对比它们的键值对内容是否完全一致，这刚好解决了对象数组的比较需求，所以你给出的代码：

componentDidUpdate(prevProps) { 
  if(!_.isEqual(prevProps.children, this.props.children)) { 
    console.log('not equal'); 
    // execute some code 
  }
}

是完全可以工作的。

使用_.isEqual的注意事项 #

• 确保正确引入Lodash：要么全局引入Lodash（import _ from 'lodash'），要么单独引入isEqual方法（import isEqual from 'lodash/isEqual'），避免出现_ is undefined的报错。
• 避免循环引用：如果你的对象数组里存在循环引用（比如对象A的某个属性指向对象B，对象B又指向对象A），_.isEqual可能会陷入无限循环或者返回错误结果，这种情况需要提前处理循环引用，或者改用自定义比较逻辑。
• 组件实例的特殊情况：如果children是React组件实例而非纯数据对象，_.isEqual可能会因为组件内部的状态、引用等无关字段导致误判。这种情况下，建议你不要直接比较整个children，而是比较组件对应的数据源标识（比如每个子组件props里的id字段），这样更准确。

自定义比较的替代方案（无需Lodash） #

如果你不想引入Lodash，也可以根据对象数组的结构实现针对性的比较逻辑，性能可能比全量深比较更好。比如你的对象都有唯一的id字段，可以这样写：

componentDidUpdate(prevProps) {
  const prevChildren = prevProps.children;
  const currentChildren = this.props.children;

  // 先判断数组长度是否一致
  if (prevChildren.length !== currentChildren.length) {
    console.log('not equal');
    // 执行你的代码
    return;
  }

  // 逐个比较关键标识
  const isEqual = prevChildren.every((prevItem, index) => {
    const currentItem = currentChildren[index];
    // 这里可以根据你的需求，比较多个字段，比如id + name
    return prevItem.id === currentItem.id;
  });

  if (!isEqual) {
    console.log('not equal');
    // 执行你的代码
  }
}

这种方式只比较你关心的关键字段，避免了递归遍历整个对象的性能开销，适合数据结构固定的场景。

额外优化：提前阻止不必要的渲染 #

如果你做这个比较是为了避免子组件不必要的更新，其实可以在父组件用React.memo包裹子组件，配合自定义的比较函数，从根源上阻止无用渲染：

const MyChildComponent = React.memo(({ children }) => {
  // 子组件的逻辑
}, (prevProps, nextProps) => {
  // 返回true表示props无变化，不需要重新渲染
  return _.isEqual(prevProps.children, nextProps.children);
});

这种方式比在componentDidUpdate里处理更高效，因为它直接跳过了渲染流程。

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