React函数组件不受控外部回调获取最新state的正确处理方法

问题核心原因 #

• setState是异步批量更新，执行setDevice后当前渲染闭包内的device状态不会立刻更新
• 注册的listener属于当前渲染周期的闭包，捕获的是当前时刻的device变量，后续状态更新后旧闭包内的变量值不会同步更新，就会出现拿不到最新值甚至undefined的情况
• 组件作用域内声明的普通变量会在每次组件重渲染时被重置，无法跨渲染周期持久保存数据，仅适合单次渲染内的临时变量使用

符合Hooks规范的解决方案 #

使用useRef存储device的实时引用：useRef返回的对象在组件的整个生命周期内保持不变，其current属性是可读写的可变值，不受闭包影响，也不需要等待状态更新流程，修改后立刻生效，非常适配这类触发时机不受控的外部回调场景。

场景1：device不需要驱动UI渲染 #

如果不需要在页面上展示device相关的信息，直接用useRef存储即可，无需声明state：

import { useRef } from 'react';

export default function App() {
  // 初始化ref存储device
  const deviceRef = useRef(null);
  
  const listener = (data) => {
    // 直接访问current属性，永远拿到最新的device值
    console.log(deviceRef.current);
  };

  const scan = () => {
    // 拿到蓝牙设备实例后直接更新ref的current
    const newDevice = 获取蓝牙设备的逻辑();
    deviceRef.current = newDevice;
    addListener(listener);
  };
}

场景2：device需要驱动UI渲染 #

如果需要在UI上展示设备名、连接状态等信息，可以同时维护state和ref，更新时两边同步：state用于驱动UI渲染，ref用于给外部回调提供实时值：

import { useState, useRef } from 'react';

export default function App() {
  const [device, setDevice] = useState(null);
  const deviceRef = useRef(null);
  
  const listener = (data) => {
    // 回调内访问ref拿实时值
    console.log(deviceRef.current);
  };

  const scan = () => {
    const newDevice = 获取蓝牙设备的逻辑();
    // 同时更新state和ref，保证UI渲染和回调取值都是最新值
    setDevice(newDevice);
    deviceRef.current = newDevice;
    addListener(listener);
  };

  // UI层正常使用state即可
  return <div>已连接设备：{device?.name || '未连接'}</div>;
}

额外注意事项 #

• 组件卸载时记得移除注册的蓝牙监听器，避免内存泄漏，可以通过useEffect的清理函数实现
• 不要通过延时、强制刷新等hack方式获取state，useRef是React官方提供的标准解决方案，完全符合函数式组件的设计规范

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