React Native中useFocusEffect在后台页被异常触发问题

为什么后台页面的useFocusEffect会被意外触发 #

澄清一个常见认知误区：useFocusEffect本身的设计确实是仅在页面聚焦/失焦时执行回调，但这个逻辑的前提是你传入的回调是引用稳定的。如果回调引用每次渲染都变，Hook内部会优先处理“回调更新”的逻辑，跳过聚焦状态的判断，直接执行新的回调。

• 你当前的写法存在两个核心问题：
  • 第一，直接把每次重渲染都会新建的内联匿名函数传给useFocusEffect，没有做引用记忆。
  • 第二，你传入的空依赖数组[]，本质是传给React Navigation内部用来监听页面聚焦状态变化的effect的，并不会自动帮你记忆传入的回调函数引用。
• 具体触发链路：
  1. 全局Context的myData更新时，所有被Provider包裹的页面都会触发重渲染，包括已经退到后台栈的MyScreenOne。
  2. 重渲染时MyScreenOne生成了一个全新的、和上一次渲染引用不同的内联函数，传给useFocusEffect作为回调。
  3. useFocusEffect内部检测到传入的回调引用发生变化，不管当前页面是否处于聚焦状态，都会先执行旧回调的清理函数，再执行新回调的逻辑。
  4. 此时MyScreenOne明明处于后台非聚焦状态，却执行了内部的setMyData(updatedData)，再次触发全局状态更新，进入无限循环。

要实现“每个页面仅在前台可见时单次执行数据处理与全局状态更新，同时保证全局数据可跨页面共享”的需求，需要做两处关键调整：

• 用useCallback包裹回调函数，保证引用稳定，从根源上消除引用变化导致的误触发。
• 增加执行标记，确保聚焦时的逻辑不会重复执行，避免不必要的状态更新。

import {useCallback, useContext, useRef} from 'react';
import {View} from 'react-native';
import {useFocusEffect} from '@react-navigation/native';
import MyDataContext from '../context/MyDataContext';

const MyScreenOne = ({navigation}) => {
  const {myData, setMyData} = useContext(MyDataContext);
  // 标记当前页面是否已经执行过单次数据处理
  const hasProcessedRef = useRef(false);

  // 用useCallback记忆回调函数，保证引用稳定
  const focusCallback = useCallback(() => {
    // 已经执行过就直接跳过
    if (hasProcessedRef.current) return;

    console.log('Screen one is FOCUSED!');
    const updatedData = processData([...myData]);
    setMyData(updatedData);
    // 标记为已执行
    hasProcessedRef.current = true;

    return () => {
      console.log('Screen one was unfocused');
      // 如果需要下次回到前台时重新执行处理逻辑，在这里重置标记
      // hasProcessedRef.current = false;
    };
  // 把回调内部用到的外部依赖全部列在这里，避免闭包捕获旧值
  }, [myData, setMyData]);

  // 传入引用稳定的回调
  useFocusEffect(focusCallback);

  return (
    <View>
      <MyButton onPress={()=> navigation.navigate("MyScreenTwo")}>
        跳转到Screen Two
      </MyButton>
    </View>
  )
}

• 不要为了追求引用稳定就给useCallback传空依赖数组：如果回调内部用到了myData作为处理入参，不传依赖的话，回调会闭包捕获第一次渲染时的旧myData值，导致拿到的全局数据不是最新的。
• 全局Context的Provider值可以用useMemo做记忆优化，避免每次Provider重渲染生成新的value引用，触发所有消费组件的无意义重渲染。
• 如果你不需要页面在整个生命周期内只执行一次处理，只需要在失焦的清理函数里把hasProcessedRef.current重置为false，就能实现每次页面切回前台时重新执行一次处理逻辑。

内容的提问来源于stack exchange，提问作者Leem.fin