react中使用useEffect模拟componentDidUpdata(使 useEffect 在渲染时不执行，只在数据变更时执行)

在React中，模拟componentDidUpdate的行为可以通过useEffect钩子实现，但要注意useEffect默认在每次渲染后都会执行。为了让useEffect仅在特定依赖变化时执行，你需要传递一个空数组作为第二个参数给useEffect，这样它就只会在组件挂载时执行一次。

以下是一个示例代码，它模拟了componentDidUpdate的行为，但只有在某个特定依赖（例如一个特定的state变量）变化时才会执行：

import React, { useEffect, useState } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    // 仅在count变化时执行
    console.log('Component did update');
    // 模拟componentDidUpdate中的逻辑
    // ...
  }, [count]); // 依赖数组
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
export default MyComponent;

在这个例子中，useEffect只在count状态变化时执行。当你点击按钮以增加count时，useEffect会执行，但如果组件的其他状态变化导致重新渲染，它不会执行。