Download file 方案一

前端下载文件,通过一个 a 标签实现文件的下载

export function downloadFile(url: string) {
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

Download file 方案二

const link = document.createElement('a');
link.href = `/api/v1/reports/download?report_id=${curReportId}&lang=${curLang}`;
link.target = '_self';
link.click();

Image

封装的逻辑是什么? error fallback; lazy load image; prefetch image
组件的 props 的定义?
技术点?

Props

使用的时候会存在alias: src: originalSrc

IImageProps extends SetRequired<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
  lazy?: boolean;
  disablePrefetch?: boolean;
 // fallback logic
  fallback?: string;
  disableFallback?: boolean;
  fallbackClassName: string
}

Technical Points

• 实现 lazy load : useInViewport+ useRef<HTMLImageElement>(null)+ prop 作为内部的state

const [src, setSrc] = useState(originalSrc);

• 实现 prefetch img HTML tag with herf, rel ,as
• fallback

 const showFallback = hasError && !disabledFallback;

• render

<img  ref = {imgRef} src = {showFallback? fallback:src} onError={ onError?.()} className = { showFallback && fallbackClassName?fallbackClassName: className}/>

image 组件mount 的时候,判断什么时候return? disablePrefetch || !lazy(不想懒加载就不需要prefetch)|| !inViewport(不再视窗之内)
image 组件useEffect的时候 inViewport&&originalSrc !==src , setSrc