如何在React Native应用热重载前执行指定函数？

Metro CLI的r重载命令会直接替换JS bundle，不会触发React组件正常卸载流程（比如componentWillUnmount或useEffect的清理函数），导致WebSocket、音频播放器这类资源无法及时释放。以下是几个可行的解决方法：

• 利用DevSettings监听重载开始事件
  React Native的DevSettings模块提供了devLoadingStarted事件，会在Metro重载启动前触发。可以在开发环境下注册这个事件的监听器，提前清理资源：

  import { DevSettings } from 'react-native';
  
  // 在应用初始化或根组件中注册
  if (__DEV__) {
    DevSettings.addListener('devLoadingStarted', () => {
      // 关闭WebSocket连接
      webSocketInstance?.close();
      // 停止并释放音频播放器
      audioPlayer?.stop();
      audioPlayer?.release();
    });
  }
  

  注意用__DEV__判断环境，避免代码被打包到生产环境。

• 封装统一的清理Hook
  可以写一个自定义Hook，同时处理正常组件卸载和开发环境重载两种场景的资源清理，减少重复代码：

  import { useEffect } from 'react';
  import { DevSettings } from 'react-native';
  
  const useCleanupOnReload = (cleanupFn) => {
    // 正常卸载时执行清理
    useEffect(() => cleanupFn, [cleanupFn]);
  
    // 开发环境重载时执行清理
    useEffect(() => {
      if (!__DEV__) return;
      
      const handleReload = cleanupFn;
      DevSettings.addListener('devLoadingStarted', handleReload);
      
      return () => {
        DevSettings.removeListener('devLoadingStarted', handleReload);
      };
    }, [cleanupFn]);
  };
  
  // 使用示例
  useCleanupOnReload(() => {
    webSocketInstance?.close();
    audioPlayer?.stop();
  });
  

• 临时手动清理（应急方案）
  如果上述方法暂时不生效，可在输入r重载前，通过调试控制台手动调用资源清理函数，不过这个方法仅适合临时测试，效率较低。

目前React Native官方尚未提供类似浏览器onbeforeunload的直接API，devLoadingStarted事件是当前覆盖Metro重载场景最可靠的替代方案。

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