如何分析React Native中Passive Effects的性能耗时？

方法1：React DevTools Profiler细节视图 #

打开React DevTools的Profiler面板，完成一次包含目标渲染的录制后：

• 选中火焰图里耗时较长的"Passive effects"阶段
• 在下方Commit Details区域展开Effects，这里会列出本次渲染中所有执行的Passive effects，每个条目都关联对应的组件
• 虽不会直接显示单个effect的精确耗时，但能通过组件关联快速锁定可疑范围，再针对性分析对应组件内的useEffect

方法2：自定义Hook批量统计useEffect耗时 #

封装一个带统计功能的useEffect替换原生Hook，自动记录每个effect的执行时长：

import { useEffect as reactUseEffect } from 'react';

// 全局存储effect耗时记录
const effectTimings = [];

export function useEffect(effect, deps) {
  return reactUseEffect(() => {
    const startTime = performance.now();
    const cleanup = effect();
    const endTime = performance.now();
    // 从调用栈解析当前组件名称
    const componentName = getCurrentComponentName();
    effectTimings.push({
      component: componentName,
      duration: endTime - startTime,
      timestamp: Date.now()
    });
    return cleanup;
  }, deps);
}

// 辅助函数：从调用栈提取组件名称
function getCurrentComponentName() {
  try {
    throw new Error();
  } catch (e) {
    const stackLines = e.stack.split('\n');
    const componentLine = stackLines.find(line => line.includes('useEffect') && !line.includes('getCurrentComponentName'));
    if (componentLine) {
      const match = componentLine.match(/at (\w+) /);
      return match ? match[1] : 'UnknownComponent';
    }
    return 'UnknownComponent';
  }
}

// 导出统计结果查看方法
export function logEffectTimings() {
  console.table(effectTimings.sort((a, b) => b.duration - a.duration));
  effectTimings.length = 0;
}

使用方式：

• 把项目中所有import { useEffect } from 'react'替换为import { useEffect, logEffectTimings } from './useTimedEffect'
• 触发目标渲染后，在控制台调用logEffectTimings()，就能看到按耗时排序的effect列表，包含所属组件和耗时数据

方法3：Chrome DevTools Performance面板 #

1. 打开Chrome DevTools的Performance面板，点击录制按钮
2. 触发目标渲染操作后停止录制
3. 在时间线的React分类下找到Passive Effects事件，展开后可查看每个effect对应的组件和执行时长
4. 点击具体事件条目，还能查看完整调用栈，直接定位到代码位置

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