是否需手动释放FileReader对象并移除事件处理器防止内存泄漏？

我写了一段验证图片上传并实现预览的代码：

const validateAndPreview = (event) => {
      if(event.target.files.length < 1){
         return;
      }

      const file = event.target.files[0]

      const validExtensions = ["png", "jpg", "jpeg"];
      const fileExtension = file.type.split("/")[1]
            
      if(validExtensions.includes(fileExtension)){
         setError({ error: false, message: "" });
         let fileReader = new FileReader();

         fileReader.onload = (e) => {
            setImagePreview(e.target.result);
         }

         fileReader.readAsDataURL(file)
      }else{
         setError({ error: true, message: "File extension is invalid" });
         setImagePreview("");
      }
   }

请问是否需要手动释放FileReader对象并移除load事件处理器以避免内存泄漏，还是FileReader会自动完成这些操作？

我原本考虑采用以下写法，但不确定是否合理：

fileReader.onload = (e) => {
    setImagePreview(e.target.result);
    reader.onload = null;
    reader = null;
}

（补充）我还写了使用createObjectURL的实现方案：

const validateAndPreview = (event) => {
      if(event.target.files.length < 1){
         return;
      }

      const file = event.target.files[0]

      const validExtensions = ["png", "jpg", "jpeg"];
      const fileExtension = file.type.split("/")[1]
            
      if(validExtensions.includes(fileExtension)){
         setError({ error: false, message: "" });
         const fileURL = URL.createObjectURL(file);

         setImagePreview(fileURL);
      }else{
         setError({ error: true, message: "File extension is invalid" });
         setImagePreview("");
      }
   }

   useEffect(() => {
      return () => {
         if (imagePreview) {
            console.log("UNMOUNT")
            console.log(imagePreview)
            URL.revokeObjectURL(imagePreview);
            console.log("AFTER:", imagePreview)

         }
      };
   }, [imagePreview])

关于FileReader的内存泄漏问题 #

不需要手动释放FileReader对象或者移除load事件处理器，原因如下：

• FileReader是普通JS对象，当它的任务完成（比如load事件触发后），如果没有其他代码持有对它的引用，浏览器的垃圾回收机制会自动回收它。
• 你代码中的fileReader是函数内部的局部变量，函数执行完毕后，只要onload回调执行完成，这个变量就会失去引用，浏览器会自动处理内存回收。

你考虑的手动置空onload和reader的写法属于多余操作——就算不这么做，浏览器也能正常回收内存。当然这么写也不会产生副作用，只是没必要。

关于createObjectURL的实现方案 #

你用useEffect的清理函数调用URL.revokeObjectURL的做法非常必要且正确，理由是：

• createObjectURL创建的URL会和当前文档绑定，它不会自动释放内存，必须手动调用revokeObjectURL，或者等文档卸载时才会被释放。
• 如果不及时撤销，每次上传新图片都会生成新的URL，旧的URL持续占用内存，长期下来会导致内存泄漏。
• 把imagePreview作为useEffect的依赖，每次预览地址变化时清理旧URL，这个逻辑完全没问题。

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