如何使用React Hooks在组件卸载时结合状态值完成清理？

这个问题是React闭包特性带来的典型场景，我来帮你拆解问题根源，再给出最直接可靠的实现方案：

为什么你的原有方案不生效？ #

• 第一种方案（依赖空数组）：useEffect的清理函数捕获的是组件挂载时的files初始值（空数组），所以组件卸载时根本拿不到后续添加的文件URL，自然无法执行删除操作。
• 第二种方案（依赖files）：每次files更新都会生成新的清理函数，前一次的清理函数会在组件更新时触发（比如你添加第二个文件时，第一个清理函数会删掉刚上传的第一个文件），完全违背了“仅在卸载时删除未保存文件”的需求。

最优实现：用useRef跟踪最新文件列表 #

useRef的.current属性是可变的，且不受闭包捕获旧值的限制，我们可以用它同步保存最新的文件列表，让卸载时的清理函数始终能拿到正确的待删除文件：

import { useState, useEffect, useRef } from 'react';

const FileUploadComponent = () => {
  const [files, setFiles] = useState([]);
  // 创建ref来跟踪最新的文件列表
  const filesRef = useRef(files);

  // 每次files状态更新，同步更新ref的current值
  useEffect(() => {
    filesRef.current = files;
  }, [files]);

  const onFileAdded = (fileURL) => {
    // 用函数式更新确保拿到最新的prev状态，避免状态覆盖
    setFiles(prev => [...prev, fileURL]);
  };

  useEffect(() => {
    // 组件卸载时执行清理逻辑
    return () => {
      // 通过ref获取最新的未保存文件列表
      filesRef.current.forEach(fileURL => {
        storageAPI.removeFile(fileURL);
      });
    };
  }, []); // 依赖空数组，只在组件挂载/卸载时执行一次

  const onSave = () => {
    // 这里写入保存文件引用到数据库的逻辑...
    
    // 清空状态和ref，避免已保存的文件被卸载逻辑误删
    setFiles([]);
    filesRef.current = [];
  };

  // 组件UI部分
  return (
    <div>
      {/* 文件选择、上传的UI元素 */}
      <button onClick={onSave}>保存文件引用</button>
    </div>
  );
};

原理说明： #

• useRef的.current属性不会像state那样触发组件重渲染，我们通过一个同步的useEffect让它始终和files状态保持一致，确保它持有最新的文件列表。
• 卸载时的清理函数只在组件销毁时执行一次，且能通过filesRef.current拿到所有未保存的文件URL，完美解决闭包捕获旧值的问题。
• 点击保存后手动清空filesRef.current，确保已经存入数据库的文件不会被后续的卸载逻辑误删。

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