React Native全局变量使用：解决useState状态在回调中仅读初始值问题

• 上述“回调仅能读取首次渲染初始值”的现象，是React函数组件的闭包陷阱和原生模块长生命周期回调共同作用的结果：
  • 函数组件每次重新渲染，都会生成独立的全新作用域，作用域内的check3局部变量、check2状态值、所有函数引用，都属于当次渲染的快照。后续渲染生成的新作用域和旧作用域完全独立，变量不互通。
  • 你在无依赖的useEffect中，将RNSoundLevel.onNewFrame回调绑定到了原生模块上，这个回调从首次渲染后就一直驻留在原生层，永远只持有首次渲染时捕获的变量快照，自然读不到后续渲染更新的check2、check3的值。
  • 组件外部声明的全局check1不属于任何单次渲染的作用域，没有被闭包快照捕获，因此可以跨回调正常读写。
• 附带的代码细节问题：setCheck(check2++)存在两处错误：一是状态更新函数名写错，应为setCheck2；二是在状态更新函数参数中直接做自增的写法，依赖闭包捕获的旧值，本身就不符合React状态更新的可追踪规范。

方案1：用useRef同步状态最新值（适配高频原生回调的最优解） #

useRef的current属性是跨组件渲染持久存在的可变引用，不会被闭包快照捕获，非常适合这类长生命周期、高频触发的原生模块回调场景：

• 第一步，创建和check2状态绑定的ref，在状态更新时实时同步最新值：

  const check2Ref = useRef(check2);
  useEffect(() => {
    check2Ref.current = check2;
  }, [check2]);
  

• 第二步，在原生回调中，从ref读取最新的check2值，状态更新采用函数式写法，不依赖闭包捕获的旧值：

  RNSoundLevel.onNewFrame = (data) => {
    // 从ref读取实时值，不受闭包捕获限制
    if (check2Ref.current < 10) {
      // 传入更新逻辑，React会自动取最新的状态值计算下一次结果
      setCheck2(prevValue => prevValue + 1);
    }
  }
  

• 优势：回调仅需绑定一次即可长期运行，不需要随状态变化频繁重绑，完全避免闭包陷阱，同时符合React状态更新的规范。

方案2：补全useEffect依赖，同步绑定最新回调 #

这是React官方推荐的闭包陷阱修复方式，适合短生命周期的回调场景：

• 给绑定事件的useEffect补全依赖项，每次状态变化时，先清理旧的回调绑定，再重新绑定捕获了最新变量的新回调：

  useEffect(() => {
    let isComponentMounted = true;
    askPermission().then((record) => {
      if (!record || !isComponentMounted) return;
      RNSoundLevel.start();
      RNSoundLevel.onNewFrame = (data) => {
        if (check2 < 10) setCheck2(prev => prev + 1);
      }
    });
    // 组件卸载、依赖变化时，清理资源避免内存泄漏
    return () => {
      isComponentMounted = false;
      RNSoundLevel.stop();
      RNSoundLevel.onNewFrame = null;
    }
  // 补充effect依赖，保证每次check2变化时重新绑定最新回调
  }, [check2]);
  

• 注意事项：如果是像声音检测这类每秒触发几十上百次的高频事件，频繁重绑回调会产生不必要的性能开销，这类场景优先选择方案1的ref同步写法。

关于局部变量check3的处理 #

• 组件内部用let声明的普通局部变量check3，本身没有跨渲染的持久存储能力，每次组件重渲染都会被重置为初始值，不存在长期读写的基础。如果需要这类跨渲染的临时值：
  • 不需要同步到UI的临时计数，直接用useRef存储即可，比如const check3Ref = useRef(0)；
  • 需要把值展示到UI的场景，直接改用useState管理，不要依赖普通局部变量的作用域。

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