useEffect如何辨别对象和数组内容发生变化

在React中，可以使用`useEffect`钩子来监听对象或数组的变化。为了辨别对象或数组内容的变化，可以使用浅比较或深比较的方式。

1. 使用浅比较：
- 对于对象，可以使用`Object.is()`方法进行比较。如果两个对象引用相同，或者它们的属性值相同，则返回`true`。
- 对于数组，可以使用`===`操作符进行比较。如果两个数组引用相同，并且它们的元素个数和顺序也相同，则返回`true`。

2. 使用深比较：
- 对于对象，可以使用工具库如`lodash`的`isEqual()`方法进行比较。该方法会递归比较对象的属性值，如果它们完全相等，则返回`true`。
- 对于数组，可以使用工具库如`lodash`的`isEqual()`方法进行比较。该方法会递归比较数组的元素，如果它们完全相等，则返回`true`。

下面是一个示例，演示如何在`useEffect`中辨别对象和数组内容的变化：

import { useEffect, useRef } from 'react';
import isEqual from 'lodash/isEqual';

function Component({ data }) {
  const prevDataRef = useRef();

  useEffect(() => {
    if (!isEqual(data, prevDataRef.current)) {
      // 对象或数组内容发生了变化
      // 在这里进行相应的处理
    }

    // 更新prevDataRef的值
    prevDataRef.current = data;
  }, [data]);

  // 组件的其它代码
}

在上述示例中，`prevDataRef`是一个`useRef`引用，用于存储上一次渲染时的`data`的值。在每次组件重新渲染时，我们可以通过比较`data`和`prevDataRef.current`来判断对象或数组内容是否发生了变化。如果发生了变化，则可以在`if`语句的块中进行相应的处理。最后，我们需要更新`prevDataRef.current`的值，以便下次渲染时进行比较。