React Native中使用该useEffect代码出现内存泄漏是什么原因？

• 监听器引用不匹配：调用addEventListener和removeEventListener时传入的是两个独立的匿名函数，二者内存引用完全不同，导致移除操作完全失效，事件监听器会一直驻留内存，引发内存泄漏，甚至后续会触发意料之外的回调逻辑。
• 依赖数组缺失变量：逻辑中用到了hardware变量，但useEffect的依赖数组仅传入了step，当hardware值发生变化时，useEffect不会重新执行，旧的监听器无法被清理，逻辑会出现不符合预期的问题。
• 边界场景无清理逻辑：当step !== 2且hardware === false时，当前useEffect没有返回清理函数，上一次执行时添加的监听器没有被移除，也会引发泄漏。

先固定事件回调的引用，补全依赖数组，统一添加清理逻辑：

useEffect(() => {
  // 定义固定引用的回调函数
  const backToStep1Handler = () => {
    handleStep1WithBackhandler();
    return true;
  };
  const blockBackHandler = () => false;

  let currentHandler = null;
  if (step === 2) {
    currentHandler = backToStep1Handler;
    BackHandler.addEventListener('hardwareBackPress', currentHandler);
  } else if (hardware === true) {
    currentHandler = blockBackHandler;
    BackHandler.addEventListener('hardwareBackPress', currentHandler);
  }

  // 统一清理逻辑
  return () => {
    if (currentHandler) {
      BackHandler.removeEventListener('hardwareBackPress', currentHandler);
    }
  };
// 补全所有用到的外部依赖
}, [step, hardware, handleStep1WithBackhandler]);

如果handleStep1WithBackhandler是每次渲染都会生成的新函数，建议用useCallback包裹，避免useEffect频繁重新执行。

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