ReactJS生成唯一ID时组件重复初始化的问题求解

你的问题出在自定义Hook里的useEffect调用了forceUpdate，这会在组件挂载后额外触发一次渲染，导致组件初始化两次。而且这种方式生成ID完全没必要——我们可以在组件初始化阶段直接生成唯一ID，不需要触发额外更新。

下面是两种更合理的实现方式：

方案一：使用useState初始化生成ID #

import { useState } from 'react';

export const useUniqueId = () => {
  // useState的初始化回调只会执行一次
  const [uniqueId] = useState(() => {
    // 生成唯一ID，可根据需求调整格式
    return `unique-id-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
  });

  return uniqueId;
};

这个方案中，ID在组件初始化时就生成，且useState的初始化函数仅执行一次，不会触发额外的组件渲染，自然不会出现重复初始化的问题。

方案二：使用useRef存储ID #

如果不需要ID作为状态（即ID变化不需要触发组件渲染），用useRef更合适：

import { useRef } from 'react';

export const useUniqueId = () => {
  const idRef = useRef(null);

  // 仅在第一次渲染时生成ID
  if (!idRef.current) {
    idRef.current = `unique-id-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
  }

  return idRef.current;
};

useRef的current属性在组件整个生命周期内保持不变，生成ID的逻辑只会执行一次，也不会触发组件渲染。

额外说明 #

如果你的项目使用React 18+的StrictMode，开发模式下组件会被挂载两次，这是React用来检测副作用的机制。不过上面两种方案都能应对这种情况：useState的初始化回调在StrictMode的第二次挂载时会被跳过，useRef的判断也只会在第一次挂载时生成ID，不会重复生成。

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