React Navigation中如何在屏幕聚焦时结合依赖使用useEffect？

我想要在当前屏幕处于聚焦状态时，监听dependencyVar的变化并根据其值执行对应操作，该怎么实现？我尝试了两段代码，但不确定哪种是正确的。

我尝试的代码 #

第一段代码（无法正常运行） #

这段代码存在hooks嵌套调用的问题，违反了React hooks的规则：

useFocusEffect(
  useEffect(()=>{
    if(dependancyVar){
       //do something
    }
    else{
       //do other things
    }
    return()=>{
      alert("Screen was unfocused")
    }
  },[dependancyVar])
);

第二段代码（可正常运行，但不确定是否最优） #

const isFocused= useIsFocused();
useEffect(()=>{
  if(isFocused){
    if(dependencyVar){
      //do something
    }
    else{
      //do other things
    }
  }
},[isFocused, dependencyVar])

正确的实现方案 #

推荐使用useFocusEffect来实现，它是React Navigation专门为屏幕聚焦场景设计的hooks，比useIsFocused+useEffect的组合更简洁且贴合需求：

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
  React.useCallback(() => {
    // 仅在屏幕聚焦时，根据dependencyVar的值执行操作
    if (dependencyVar) {
      // 执行对应逻辑
    } else {
      // 执行其他逻辑
    }

    // 屏幕失焦时自动执行清理函数
    return () => {
      alert("Screen was unfocused");
    };
  }, [dependencyVar])
);

方案说明 #

1. 避免hooks嵌套：useFocusEffect的参数是一个用useCallback包裹的回调函数，而非直接传入useEffect，符合React hooks的调用规则
2. 自动处理聚焦状态：回调仅在屏幕聚焦时运行，无需手动判断isFocused
3. 依赖管理清晰：依赖数组仅需传入dependencyVar，当变量变化且屏幕聚焦时，会自动重新执行回调
4. 自动清理：返回的清理函数会在屏幕失焦时自动触发，无需额外判断

对第二段代码的补充说明 #

你的第二段代码是可行的，但useFocusEffect在这个场景下更优：它减少了状态变量的维护，避免了isFocused变化时的不必要触发，代码逻辑也更贴合"屏幕聚焦时执行操作"的需求。

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