如何在 React 中正确地使用 useEffect 来监听一个对象的特定属性变化，而不是整个对象？

如何在 React 中正确地使用 useEffect 来监听一个对象的特定属性变化，而不是整个对象？

解析：
在 React 中，useEffect 的依赖数组会进行浅比较。如果直接将一个对象作为依赖项（例如 { a: 1, b: 2 }），即使对象内容相同，每次渲染时该对象都是新引用，会导致 useEffect 每次都执行，造成不必要的副作用。

正确做法是：

1. 仅将需要监听的属性作为依赖项，而不是整个对象：

   const obj = { id: 1, name: 'Alice', timestamp: Date.now() };
   
   useEffect(() => {
     // 只在 obj.id 变化时执行
   }, [obj.id]);
   

2. 如果对象来自 props 或 state，确保父组件没有频繁创建新对象。可以使用 useMemo 缓存对象：

   const config = useMemo(() => ({ url, method }), [url, method]);
   
   useEffect(() => {
     fetchData(config);
   }, [config.url, config.method]); // 或直接 [url, method]
   

3. 避免在依赖中使用未解构的对象。错误示例：

   // ❌ 错误：每次 obj 引用变化都会触发 effect
   useEffect(() => { ... }, [obj]);
   

4. 如必须比较对象深层内容，可考虑使用自定义 hook（如 useDeepCompareEffect）或通过序列化（如 JSON.stringify）进行比较（注意性能问题）：

   useEffect(() => {
     // 谨慎使用，仅适用于小对象
   }, [JSON.stringify(obj)]);
   

最佳实践是解构出具体需要监听的字段，保持依赖项为原始类型（string、number、boolean 等），以确保 useEffect 按预期触发。