出现这种情况的原因通常是使用了引用类型的 props 或 state。当父组件中的引用类型 props 或 state 发生变化时，即使它们的值没有实质性的改变，也会触发子组件中 useEffect 钩子的执行。 解决方法有两种：

1. 对于包含引用类型的 props 和 state，可以使用 useMemo 或 useCallback 进行优化，保证只有在引用值发生变化时才会触发子组件中的 useEffect 执行。
2. 使用 react-redux 等类似的状态管理工具，将需要同步的状态放在全局 store 中进行管理，避免传递引用参数。 示例代码：

import React, { useState, useEffect, useMemo } from 'react';

function Child({ obj }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Child effect runs');
  }, [obj]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    

      
{count}
      Increase
    
  );
}

export default function Parent() {
  const [obj, setObj] = useState({ a: 1 });
  const memoizedObj = useMemo(() => obj, [obj]);

  useEffect(() => {
    console.log('Parent effect runs');
    const timer = setInterval(() => {
      setObj(obj => ({ a: obj.a + 1 }));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return ;
}

在这个例子中，Parent 组件中每秒会更新 obj 对象的属性，导致 Child 组件中的 useEffect 钩子重复执行。如果将 Child 组件中的 useEffect 依赖项设置为 obj，仍然会重复执行。此时可以使用 useMemo 对 obj 进行浅比较，保证只有 obj 的引用发生变化时才会执行 useEffect。