React Hooks中如何正确获取表格加载完数据后的渲染完成时间

你写的这段代码不能准确获取到表格用新数据完成渲染的时间，问题出在以下两点：

• 你连续调用setTableData(data)和setTableDataRenderedTime(true)时，React会把这两个状态更新合并到同一次渲染批次处理，依赖tableDataRenderedTime的useEffect触发时，只能保证React完成了真实DOM的更新，不代表表格组件已经把所有数据对应的内容都渲染完成：大部分成熟的表格组件内部会做数据格式化、分片渲染、虚拟滚动等逻辑，这些异步处理的执行时机晚于React的DOM更新时机。
• 就算你用的是最简单的同步渲染原生表格，这个方案的时间也不准：useEffect的执行时机是浏览器绘制页面前的阶段，拿到的时间比用户实际看到表格内容的时间要早。

• 优先使用表格组件自带的渲染完成回调：绝大多数组件库的Table组件都提供了数据加载完成、渲染完成的钩子，从这个钩子中获取的时间是最准确的。
• 如果表格组件没有提供对应回调，可以用setTimeout把时间获取逻辑的优先级降到最低，保证在浏览器绘制完成后执行，不需要额外定义tableDataRenderedTime状态：

const [tableData,setTableData] = useState([])
// 如果需要计算从请求发起到渲染完成的总耗时，可以加这个变量记录起始时间
const requestStartTime = useRef(0)

useEffect(()=>{
  requestStartTime.current = performance.now()
  const fetchData = async () => {
    const data = await getData({...})
    setTableData(data)
  }
  fetchData()
},[])

useEffect(()=>{
  // 跳过首次初始化空数据的情况
  if(tableData.length === 0) return
  setTimeout(() => {
    const renderFinishTime = performance.now()
    // 总耗时计算：renderFinishTime - requestStartTime.current
    console.log('表格渲染完成时间', renderFinishTime)
  }, 0)
},[tableData])

return <TableComponent data={tableData}/>

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