React中数组对象属性变更为何无法触发useEffect重执行？

直接修改属性不触发的原因 #

• React对useEffect的依赖更新判断用的是浅比较——只检查依赖项的引用是否变化，不会深入遍历对象内部的属性值。
• 你直接修改数组里IHousing对象的isHighlighted属性时，数组本身的内存引用没改，数组里的对象引用也没变，只是对象内部的属性值变了。React对比依赖时发现qualifiedFromCurrentPage的引用和之前一致，就判定依赖没更新，所以不会触发useEffect。

背后的React机制 #

• React的状态更新和副作用触发核心依赖不可变性原则。选择浅比较是为了性能：如果每次都深比较所有对象属性，复杂场景下会带来极大的性能损耗。
• 要触发依赖数组的更新，必须生成新的引用：比如通过map方法返回新对象，或者用扩展运算符复制数组后修改对应项。示例代码：

  // 父组件中正确的更新方式
  const handleApartmentHover = (apartmentId, isHighlighted) => {
    setQualifiedFromCurrentPage(prevList => 
      prevList.map(apartment => 
        apartment.id === apartmentId 
          ? { ...apartment, isHighlighted } 
          : apartment
      )
    );
  };
  

  这样新数组的引用和原数组不同，React能检测到依赖变化，进而触发useEffect重新执行。

关于高亮ID方案可行的原因 #

• 维护单独的highlightedApartmentId状态时，ID是字符串/数字这类基础类型，它们的变化会被React的浅比较直接识别到。即使原数组引用不变，只要这个ID状态更新，依赖它的useEffect就会触发，所以这个方案能生效。

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