React TypeScript中从图片数组随机取图的正确方式及问题排查

原代码存在的问题 #

• 路径错误：React项目中public目录下的资源需使用绝对路径（以/开头），相对路径../../public/...会在路由切换时导致资源加载失败。
• 不必要的性能开销：预创建所有<img> JSX元素，每次调用函数都会重新生成这些元素实例。
• 随机性不稳定：若在组件渲染阶段调用该函数，父组件每次重渲染都会触发新的随机数，导致图片无预期切换。

优化后的代码（函数式） #

export function getRandomTrumpImage() {
  // 存储public下的图片绝对路径
  const trumpImagePaths = [
    '/imgs/animations/trump133.png',
    '/imgs/animations/trump15624.png',
    '/imgs/animations/trump233.png'
  ];
  
  const randomIndex = Math.floor(Math.random() * trumpImagePaths.length);
  const randomPath = trumpImagePaths[randomIndex];
  
  // 按需生成img元素，避免预创建开销
  return <img src={randomPath} alt="Random Trump animation" />;
}

进阶组件化写法（避免频繁切换） #

如果需要图片在组件生命周期内保持稳定，不会随父组件重渲染切换，可封装成React组件：

import { useState, useEffect } from 'react';

export function RandomTrumpImage() {
  const [imagePath, setImagePath] = useState('');
  
  const trumpImagePaths = [
    '/imgs/animations/trump133.png',
    '/imgs/animations/trump15624.png',
    '/imgs/animations/trump233.png'
  ];
  
  useEffect(() => {
    // 组件挂载时仅生成一次随机路径
    const randomIndex = Math.floor(Math.random() * trumpImagePaths.length);
    setImagePath(trumpImagePaths[randomIndex]);
  }, []);
  
  return imagePath ? <img src={imagePath} alt="Random Trump animation" /> : null;
}

关键修复点 #

1. 绝对路径替换相对路径：确保资源在任何路由场景下都能正确加载。
2. 存储路径而非预创建JSX：减少不必要的元素实例生成，提升性能。
3. 组件化状态控制：通过useEffect和useState固定随机值，避免无预期的图片切换。

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