React：能否在componentWillReceiveProps方法中比较两个数组？

嘿，这个问题问得特别到位，我刚接触React的时候也被类似的问题困惑过！咱们一步步拆解来看：

核心结论：componentWillReceiveProps没有特殊的数组比较逻辑 #

首先得明确：componentWillReceiveProps本身完全没有对数组做特殊处理，你说的没错——在JS里，两个数组直接用!==比较的是它们的内存引用地址，而不是数组内容。所以这段代码能“正常运行”，和这个生命周期方法本身无关，问题出在父组件传递filters的方式上。

为什么这段代码看起来能正常工作？ #

在那个购物车项目里，父组件在更新filters的时候，应该是每次都生成了一个新的数组引用，比如：

• 使用扩展运算符创建新数组：setFilters([...oldFilters, newFilter])
• 通过filter/map等返回新数组的方法更新：setFilters(oldFilters.filter(item => item !== value))
• 直接使用数组字面量重新赋值

这种情况下，每次filters变化时，父组件传递给子组件的都是一个新的数组对象，所以nextFilters和this.props.filters的引用地址不一样，nextFilters !== this.props.filters就会返回true，从而触发handleFetchProducts方法，看起来逻辑是正常的。

这种写法的潜在问题 #

但这其实是一种“巧合正确”的写法，非常依赖父组件的实现：

• 如果父组件只是修改了现有数组的元素（比如filters[0] = newVal）但没有创建新的数组引用，那么nextFilters和this.props.filters的引用还是同一个，!==会返回false，明明filters内容变了，却不会触发更新，这就会导致bug。
• 反过来，如果父组件因为某些原因重复传递了相同内容的新数组（比如不必要的重新渲染生成了新引用），那么!==会返回true，导致handleFetchProducts被不必要地调用，造成性能浪费。

正确的数组内容比较方式 #

如果你想真正比较数组的内容（而不是依赖引用变化），可以用这些方法：

• 浅比较：自己实现一个简单的浅比较函数，遍历数组元素逐一对比：

  function arraysShallowEqual(a, b) {
    if (a === b) return true;
    if (!a || !b || a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (a[i] !== b[i]) return false;
    }
    return true;
  }
  

  然后用!arraysShallowEqual(nextFilters, this.props.filters)来判断。
• 使用工具函数：比如React内部的shallowEqual（可以从react-redux包中导入，或者自己实现），或者用lodash.isEqual做深比较（如果数组里嵌套了对象）。
• JSON序列化（谨慎使用）：JSON.stringify(nextFilters) !== JSON.stringify(this.props.filters)，但要注意这种方式对数组元素的顺序、特殊值（比如undefined、NaN）的处理有局限，只适合简单数组。

额外提示：生命周期方法的更新 #

另外要注意，componentWillReceiveProps已经是React的废弃API了，现在推荐用getDerivedStateFromProps（配合componentDidUpdate）来处理props变化后的逻辑；如果是函数组件的话，直接用useEffect，并把filters作为依赖项（这时候React内部会做浅比较）：

useEffect(() => {
  handleFetchProducts(filters, undefined);
}, [filters]);

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