React useLayoutEffect计算组件渲染时长出现负值原因排查

你遇到的负数问题和useLayoutEffect的执行逻辑无关，核心错误是时间计算的API用错了：

• Date.prototype.getMilliseconds()返回的是时间对象里毫秒段的分量值，取值范围只有0~999，代表的是当前时间在整秒之后过了多少毫秒，不是从时间原点开始累计的总毫秒数。一旦组件的存活时间跨过了整秒边界，结束时间的毫秒分量就会小于起始时间的毫秒分量，直接做减法自然会得到负数。

举个直观例子：组件挂载时时间为16:20:41.930，此时getMilliseconds()返回930；组件在120毫秒后卸载，时间走到16:20:42.050，此时getMilliseconds()返回50，计算差值为50-930=-880，和实际120毫秒的存活时长完全不符。

• 你对useLayoutEffect执行时机的认知是正确的：空依赖数组的useLayoutEffect会在组件首次挂载、DOM提交完成后同步执行，返回的清理函数只会在组件卸载时触发，执行顺序确实晚于effect的初始回调，只要时间计算逻辑正确，得到的时长一定是正数。
  补充说明：React 18严格模式下会执行一次挂载->卸载->重新挂载的流程，这只会让你额外记录到一次极短的首次挂载时长，不会导致时间差出现负数。

推荐用精度更高、不受系统时间调整影响的performance.now()做时长统计，也可以用Date.now()获取总毫秒时间戳计算：

const MyComponent = () => {
  useLayoutEffect(() => {
    const startTime = performance.now();
    return () => {
       const endTime = performance.now();
       const timeRendered = endTime - startTime;
       console.log(timeRendered); // 输出始终为正的毫秒级时长
    }
  }, []);

  return <>{/* 业务组件内容 */}</>;
}

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