React中URL视频下载方案是否合理？求更优实现方式

你的判断没错，直接操作DOM确实不符合React的最佳实践，我们可以通过React的useRef钩子管理DOM元素，或者在服务器允许的情况下简化实现，以下是两种更优方案：

方案一：用useRef管理下载链接（替代手动DOM操作） #

在组件中声明隐藏的<a>标签，通过useRef引用它，避免手动创建/删除DOM节点，更贴合React组件化思想：

import { useRef, useState } from 'react';

function VideoDownloader() {
  const downloadLinkRef = useRef(null);
  const [loading, setLoading] = useState(false);

  const downloadFile = async (url) => {
    setLoading(true);
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('请求失败');
      
      const blob = await response.blob();
      const blobURL = URL.createObjectURL(blob);
      
      // 通过ref获取a标签并设置属性
      const link = downloadLinkRef.current;
      link.href = blobURL;
      link.download = 'video.mp4';
      link.click();
      
      URL.revokeObjectURL(blobURL);
    } catch (err) {
      alert('下载失败！');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={() => downloadFile('你的视频URL')} disabled={loading}>
        {loading ? '下载中...' : '下载视频'}
      </button>
      {/* 隐藏的下载链接，由ref管理 */}
      <a ref={downloadLinkRef} style={{ display: 'none' }} />
    </div>
  );
}

方案二：直接使用a标签（服务器支持直接下载时） #

如果视频URL对应的服务器响应头允许直接下载（比如设置了Content-Disposition: attachment），可以完全省去fetch步骤，直接用React的a标签实现：

import { useState } from 'react';

function VideoDownloader() {
  const [loading, setLoading] = useState(false);

  const handleDownload = () => {
    setLoading(true);
    // 可根据实际情况添加加载状态逻辑
    setTimeout(() => setLoading(false), 500);
  };

  return (
    <div>
      <a 
        href="你的视频URL" 
        download="video.mp4"
        onClick={handleDownload}
      >
        {loading ? '下载中...' : '下载视频'}
      </a>
    </div>
  );
}

方案优势说明 #

• 遵循React声明式编程原则，DOM元素由组件渲染管理，而非手动操作
• 用useRef按需访问DOM，符合React状态管理逻辑
• 代码结构清晰，组件DOM可见性高，后续维护更方便

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