React Hooks对象引用对比：解决自定义Hook重复渲染问题

问题回顾 #

自定义Hook useRegexValidate 陷入无限重渲染循环，核心原因：

• React的useEffect依赖数组采用引用比较，若组件渲染时传入new RegExp(...)，每次都会生成新实例，触发依赖变化进而执行useEffect
• useEffect内调用setResult更新状态，触发组件重渲染后又生成新的RegExp实例，形成循环

你尝试过传入正则字符串（但每次验证都要新建RegExp）、定义常量正则（增加用户使用成本），需要更优的解决方案。

优化方案 #

方案1：用useMemo替代useState+useEffect（最优）

验证逻辑是纯同步计算，无需维护状态，直接用useMemo缓存结果，彻底避免状态更新引发的重渲染：

function useRegexValidate(
  value: string,
  regex: RegExp,
  errorMessage: string,
  deps: any[] = []
): ValidationResult {
  return useMemo(() => {
    if (!regex.test(value)) {
      return new ValidationResult(false, errorMessage);
    }
    return ValidationResult.Valid;
  }, [value, regex.source, regex.flags, errorMessage, ...deps]);
}

• 依赖regex.source（正则匹配内容）和regex.flags（匹配标志）而非RegExp实例本身，只要正则内容一致，即使是新实例也不会触发重新计算
• 完全消除状态更新带来的重渲染循环，性能最优

方案2：自定义依赖比较（适配异步场景）

如果需要保留useState（比如后续扩展异步验证），可以用useRef存储上一次的依赖值，手动比较内容是否变化，仅在内容真的改变时更新状态：

function useRegexValidate(
  value: string,
  regex: RegExp,
  errorMessage: string,
  deps: any[] = []
): ValidationResult {
  const [result, setResult] = useState<ValidationResult>(ValidationResult.Valid);
  const prevDepsRef = useRef<{
    value: string;
    regexSource: string;
    regexFlags: string;
    errorMessage: string;
    deps: any[];
  }>();

  useEffect(() => {
    const currentDeps = {
      value,
      regexSource: regex.source,
      regexFlags: regex.flags,
      errorMessage,
      deps
    };

    // 手动比较依赖内容是否一致
    const isEqual = prevDepsRef.current && 
      prevDepsRef.current.value === currentDeps.value &&
      prevDepsRef.current.regexSource === currentDeps.regexSource &&
      prevDepsRef.current.regexFlags === currentDeps.regexFlags &&
      prevDepsRef.current.errorMessage === currentDeps.errorMessage &&
      currentDeps.deps.every((dep, idx) => dep === prevDepsRef.current!.deps[idx]);

    if (!isEqual) {
      prevDepsRef.current = currentDeps;
      setResult(regex.test(value) ? ValidationResult.Valid : new ValidationResult(false, errorMessage));
    }
  }); // 无需依赖数组，内部手动管控更新时机

  return result;
}

• 摆脱React默认的引用比较限制，自定义判断逻辑
• 代码相对繁琐，适合需要异步验证的场景

方案3：支持混合输入（兼顾易用性与性能）

允许用户传入字符串或RegExp，内部自动缓存稳定的RegExp实例，既降低用户使用成本，又避免重复创建实例：

function useRegexValidate(
  value: string,
  regex: RegExp | string,
  errorMessage: string,
  deps: any[] = []
): ValidationResult {
  // 缓存RegExp实例，基于输入内容而非引用
  const regexObj = useMemo(() => {
    return typeof regex === 'string' ? new RegExp(regex) : regex;
  }, [typeof regex === 'string' ? regex : regex.source, typeof regex === 'string' ? '' : regex.flags]);

  return useMemo(() => {
    return regexObj.test(value) ? ValidationResult.Valid : new ValidationResult(false, errorMessage);
  }, [value, regexObj, errorMessage, ...deps]);
}

• 用户无需关注正则的定义方式，传入字符串或实例均可
• 内部保证RegExp实例的稳定性，不会引发不必要的重渲染

内容的提问来源于stack exchange，提问作者Spook