React中_.isEqual与===比较props的差异疑问及最佳实践咨询

问题解答 #

首先直接给结论：_.isEqual 和 === 返回结果不同并不意味着属性值的类型一定不同，它们的核心差异在于比较逻辑的本质——而且你猜测里关于「_.isEqual会做类型转换」的部分是不准确的，我来详细拆解：

1. 两者的比较逻辑差异

• 严格相等运算符 ===：

  • 第一步先检查两个值的类型，类型不同直接返回false；
  • 类型相同时，对于基本类型（字符串、数字、布尔值等）比较值是否一致；对于引用类型（对象、数组、函数等），比较的是内存地址是否相同（也就是是否是同一个引用）。
    举个实际场景的例子：

  const oldProps = { userInfo: { name: "David", age: 30 } };
  const nextProps = { userInfo: { name: "David", age: 30 } };
  
  oldProps.userInfo === nextProps.userInfo; // false，因为是两个不同的对象引用
  

• Lodash的_.isEqual：

  • 它不会做类型转换（这点和===一致，比如_.isEqual(1, '1')返回false）；
  • 对于引用类型，它会深度递归遍历，比较对象/数组的每一层内容是否完全一致，而不是比较引用地址。
    还是上面的例子：

  _.isEqual(oldProps.userInfo, nextProps.userInfo); // true，因为对象的每一层内容都完全相同
  

所以你遇到的结果不同，大概率是因为比较的是不同引用但内容一致的对象/数组，而不是类型不同。

2. 是否推荐在componentWillReceiveProps中使用_.isEqual？

分场景来看：

• 推荐的场景：当你需要判断props中引用类型的内容是否真的发生变化，而不是引用是否变化时，_.isEqual非常合适。比如父组件每次渲染都生成一个新的对象引用，但内容和之前一样，这时候用===会误判为props变化，触发不必要的状态更新或渲染，而_.isEqual能准确识别内容未变化，避免无效操作。
• 需要注意的问题：_.isEqual是深度递归比较，如果你的props是多层嵌套的复杂大对象，频繁调用可能会有性能损耗。这时候可以做这些优化：
  • 只比较你实际关心的字段，而不是整个props对象；
  • 考虑使用React的PureComponent（类组件）或React.memo（函数组件），它们默认做浅比较，若需要深度比较，React.memo可以传入自定义比较函数（实现类似_.isEqual的逻辑）；
  • 在父组件中用useMemo（函数组件）或缓存工具处理对象/数组，避免传递不必要的新引用。

另外补充一点：componentWillReceiveProps已经被React标记为过时（deprecated）API了，现在更推荐使用static getDerivedStateFromProps（类组件）或者useEffect配合依赖数组（函数组件）来处理props变化的逻辑哦。

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