如何编写React代码生成不随组件渲染变化的随机数？

已定义工具函数：

const getRandomNum = (max) => Math.floor(Math.random() * max)

以下是三种实现方案及分析：

1. 使用useEffect #

const ComponentA = () => { 
  const [randomNum, setRandomNum] = useState(0) 
  useEffect(() => { 
    setRandomNum(getRandomNum(10)) 
  }, []) 
  return <div>{randomNum}</div>
}

• 执行逻辑：组件挂载后执行一次useEffect，设置随机数。
• 不足：初始状态为0，会先渲染0，随后更新为随机数，触发一次额外重渲染。最终随机数不会随后续渲染改变，但存在不必要的渲染过程。

2. 使用useState初始化函数 #

const ComponentA = () => { 
  const [randomNum] = useState(() => getRandomNum(10)) 
  return <div>{randomNum}</div>
}

• 执行逻辑：useState的初始化函数仅在组件首次渲染时执行一次，后续渲染直接复用已保存的状态值。
• 优势：完全符合需求，无额外渲染，语义明确——随机数作为组件状态存在，是最贴合场景的实现方案。

3. 使用useMemo #

const ComponentA = () => { 
  const randomNum = useMemo(() => getRandomNum(10), []) 
  return <div>{randomNum}</div>
}

• 执行逻辑：依赖项为空数组时，useMemo仅在首次渲染计算并缓存随机数，后续渲染直接复用缓存值。
• 注意点：虽然能实现需求，但useMemo的设计初衷是缓存昂贵计算的结果，用它存储状态类的值语义不够精准，不过功能上是可行的。

结论 #

方案2和方案3都能保证随机数不随组件渲染改变，其中方案2是最优选择；方案1虽能达到最终效果，但存在不必要的初始渲染。

内容的提问来源于stack exchange，提问作者t-keshi