React 16.x中useFocusEffect返回Promise类型的清理函数是否可行？

让我帮你拆解下这个实现的实际表现、潜在漏洞，以及React版本差异带来的影响：

一、当前写法在React 16.x下的常规表现 #

你的代码逻辑是在屏幕失去焦点时（通过useFocusEffect的清理函数）触发异步表单保存，在React 16.x中是能覆盖大部分常规场景的：

• 当用户切换到其他Tab、返回上一页、卸载当前页面时，useFocusEffect的清理函数会同步执行，saveFormAsync会被立即调用（虽然React不会等待异步操作完成，但保存动作已经触发）。
• 对于普通用户操作（非极端快速切换），表单数据的保存逻辑是能正常触发的。

二、需要注意的潜在场景漏洞 #

1. 依赖数组的正确性问题 #

你给useCallback传了空依赖数组[]，这意味着：

• 清理函数里拿到的saveFormAsync和formData会被固定为组件初始化时的版本。
• 如果saveFormAsync依赖了组件内的state/context，或者formData是动态更新的，那么清理函数会使用旧值执行保存，导致保存的数据不正确。
  这是最容易踩的坑，必须根据实际情况补全依赖。

2. 快速切换屏幕的竞态问题 #

如果用户非常快速地在多个屏幕间切换，React 16.x的同步清理会导致：

• 前一个页面的saveFormAsync还未完成，新页面已经挂载，若formData是引用类型（比如对象），可能出现旧的保存请求覆盖新数据的情况。

三、React 17的差异（你需要知道的迁移风险） #

React 17开始，effect的清理函数会被异步调度（浏览器空闲时才执行），这意味着：

• 用户快速切换屏幕时，前一个页面的清理函数可能还没执行，新页面已经渲染完成，更容易出现数据竞态。
• 不过你是针对React 16.x验证，当前版本不受这个特性影响，但如果后续升级版本需要重点关注。

四、优化建议（覆盖更多边缘场景） #

1. 确保拿到最新的表单数据 #

用useRef保存最新的formData，避免依赖变化导致useFocusEffect频繁触发：

const formDataRef = useRef(formData);

// 实时更新ref的当前值
useEffect(() => {
  formDataRef.current = formData;
}, [formData]);

useFocusEffect(useCallback(() => {
  return () => {
    // 调用保存时使用ref的最新值
    saveFormAsync(formDataRef.current);
  };
}, [saveFormAsync])); // 仅依赖saveFormAsync

2. 处理异步保存的竞态 #

如果存在快速切换场景，用标记忽略旧的保存请求：

useFocusEffect(useCallback(() => {
  let isScreenActive = true;

  const performSave = async () => {
    if (isScreenActive) {
      await saveFormAsync(formData);
    }
  };

  return () => {
    // 标记当前屏幕已失活，忽略未完成的保存
    isScreenActive = false;
    performSave();
  };
}, [saveFormAsync, formData]));

总结 #

你的初始写法能覆盖常规用户操作场景，但补全依赖、处理竞态后，就能覆盖快速切换、动态数据更新等边缘场景，让逻辑更健壮。

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