如何判定React函数式组件完成前端可见渲染？useEffect方案准吗？

你当前基于空依赖useEffect的实现无法准确统计组件对用户可见的渲染耗时，统计结果存在明显偏差。

• 计时起点错误：你在调用setStoreViewState的外层函数中标记渲染开始时间，但React的状态更新是异步批量调度的，调用setState的时间点和组件真正开始执行渲染逻辑的时间点可能存在数毫秒到数百毫秒的偏差，完全无法对齐渲染流程的真实起点。
• 触发时机不完整：空依赖数组的useEffect仅会在组件首次挂载完成后触发一次，后续状态变化触发的重渲染（比如你代码里setStoreViewState触发的更新）完全不会触发该回调，无法统计更新场景的渲染耗时。
• 结束时机过早：useEffect的触发时机是React完成DOM节点提交到文档树之后，此时浏览器还未执行布局、绘制、栅格化等渲染流水线步骤，用户还看不到页面内容；如果组件包含图片、自定义字体、复杂CSS效果，DOM提交到内容真正可见之间还会有额外延迟，此时标记结束得到的耗时远小于用户真实感知的加载时间。

统计逻辑需要对齐两个核心时间点：

1. 渲染起点：组件函数本身开始执行的瞬间，这是React正式启动本次渲染流程的标志，建议用精度更高的performance.now()代替Date.now()计时。
2. 渲染终点：浏览器完成所有绘制操作、内容已经展示到屏幕上的瞬间，需要通过两层嵌套requestAnimationFrame拿到准确时机——第一层rAF在浏览器下一次绘制前触发，第二层rAF触发时浏览器已经完成上一帧的全流程绘制，内容对用户可见。

参考实现代码：

observer(function Component() {
  // 标记本次渲染的起点，放在组件逻辑最顶部
  const renderStartTime = performance.now();

  React.useEffect(() => {
    // 等待两次rAF确认内容绘制完成
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const renderEndTime = performance.now();
        console.log(`组件用户可见渲染耗时：${(renderEndTime - renderStartTime).toFixed(2)}ms`);
        
        // 如果需要等图片、字体等异步资源加载完成后再统计，可在此处补充资源加载监听逻辑
      });
    });
  }); // 不传依赖数组，每次渲染完成后都会执行统计

  const thingsToShow = getStoreViewState();
  return <div>{thingsToShow}</div>;
});

• 开发环境下React严格模式会触发组件双执行，统计结果会比真实值高一倍，要获取准确数据请在生产构建环境下测试。
• 如果使用React 18并发特性、Suspense懒加载、路由懒加载等能力，需要额外补充Suspense状态切换、异步chunk加载的耗时统计，才能得到完整的用户感知加载时间。

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