react useCallback 如何监听一个对象中是否有变化

`useCallback` 是 React Hooks 中的一个辅助函数，它用于优化性能，特别是在组件内部有一个昂贵计算的回调函数时。当你需要将一个函数传递给子组件，但这个函数依赖于一些可能会改变的外部状态（如 props 或者 state），使用 `useCallback` 可以确保每次依赖变化时，才会重新创建新的回调函数引用。

如果你想要监听一个对象中是否有变化，特别是当这个对象作为props的一部分，并希望避免频繁触发渲染，可以这样做：

1. 首先，将对象包装到一个新的函数中，这个函数返回你想观察的对象：

const getWrappedObject = () => {
  const obj = { propertyA: 'value', propertyB: 42 }; // 假设这是来自父组件的props

  return obj;
};

2. 然后，在`useCallback`里使用这个函数，而不是直接使用对象：

const MyComponent = ({ myObject }) => {
  const wrappedObj = useCallback(getWrappedObject(), [myObject]); // 依赖项是myObject

  useEffect(() => {
    console.log('Object has changed:', wrappedObj !== prevWrappedObj);
  }, [wrappedObj]);

  // ...其他组件逻辑...
};

// 使用时，传入getWrappedObject的结果
<MyComponent myObject={yourObject} />

每当`myObject`发生变化导致`getWrappedObject`返回的新值不同，`useEffect`的依赖数组会检测到变化并执行回调，从而得知对象已更新。