React自定义实现useWatch钩子

在 React 中实现一个类似 Vue 的watch功能的useWatch钩子，可以让我们监听状态变化并执行副作用。下面我将展示如何实现这一功能。

基本实现

import { useEffect, useRef } from 'react';

function useWatch<T>(
  value: T,
  callback: (newValue: T, oldValue: T | undefined) => void,
  options: { immediate?: boolean } = {}
) {
  const { immediate = false } = options;
  const oldValueRef = useRef<T | undefined>();
  const isFirstRender = useRef(true);
  const isImmediateCalled = useRef(false);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      if (immediate && !isImmediateCalled.current) {
        callback(value, oldValueRef.current);
        isImmediateCalled.current = true;
      }
      return;
    }

    const oldValue = oldValueRef.current;
    oldValueRef.current = value;

    // 只有当值变化时才执行回调
    if (oldValue !== value) {