如果父组件卸载，则阻止子属性更新

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

function ParentComponent() {
  const [data, setData] = useState('initial data');

  useEffect(() => {
    // 模拟异步数据获取
    const timer = setTimeout(() => {
      setData('updated data');
    }, 2000);

    // 清理函数，组件卸载时执行
    return () => {
      clearTimeout(timer); // 阻止状态更新
    };
  }, []); // 空依赖数组确保只运行一次

  return (
    <div>
      <button onClick={() => setData('clicked data')}>Change Data</button>
      <ChildComponent data={data} />
    </div>
  );
}

function ChildComponent({ data }) {
  useEffect(() => {
    console.log('ChildComponent received new data:', data);
    // 这里可以添加需要在数据更新时执行的逻辑
  }, [data]);

  return <div>{data}</div>;
}

export default ParentComponent;