写一个多时点did代码

在JavaScript中，特别是在React框架中，我们可能会遇到需要处理组件状态随时间变化的情况。"Did"通常是指"已做"或者"已完成"，在这个上下文中，我们可以创建一个名为`useDidUpdate()`或者`useDidMountEffect()`的自定义hook，它会在组件更新后执行一次回调函数。这里是一个简单的例子：

import { useState, useEffect } from 'react';

function useDidUpdate(callback) {
  const [isMounted, setMounted] = useState(false);

  useEffect(() => {
    // 当组件挂载完成时
    if (isMounted === false) {
      setMounted(true);
      callback(); // 执行初始回调
    }

    // 更新钩子时才执行第二次及后续回调
    return () => {
      if (isMounted) {
        callback();
      }
    };
  }, []); // 空依赖数组，只在首次渲染后执行

  // 返回一个布尔值表示组件是否已经挂载并初始化过
  return isMounted;
}

// 使用示例
function MyComponent() {
  const didUpdate = useDidUpdate(() => {
    console.log('Component updated at a later time point');
  });

  // 其他组件逻辑...
  
  if (didUpdate) {
    // 此处执行在组件更新后的操作
  }
}

在这个hooks里，当组件第一次渲染完毕后，会触发`callback`的执行，并且每次组件更新后都会再次执行。如果你希望在某个特定时刻执行这个回调，可以将`callback`绑定到某个生命周期方法，如`componentDidUpdate`。