时间戳

首页 > 解决方案 > 获取数据在 reactjs 钩子中的反应组件中呈现的时间

reactjs - 获取数据在 reactjs 钩子中的反应组件中呈现的时间

问题描述

我想获取使用其数据呈现​​表格的时间，这段代码我可以正确获取时间吗？我不知道 useEffect 何时触发 tableDataRenderedTime，数据是否已更新到表中


const [tableData,setTableData] = useState([])
const [tableDataRenderedTime,setTableDataRenderedTime] = useState(false)


useEffect(()=>{

...
const data = await getData({...})
setTableData(data)
setTableDataRenderedTime(true) // <---- 
...


},[])

useEffect(()=>{
 const time = performance.now() // <---- Is this the time when the table renderd with new Data??

},[tableDataRenderedTime])



return (

<TableComponent data={data}/>
)

标签： reactjsreact-reduxreact-routerreact-hooks

解决方案

performance.now()是相对于页面加载的。如果您需要获得呈现表格的确切时间，您可以使用Date.now().

...
useEffect(()=>{
 const time = Date.now() // Exact time in milliseconds when table data gets updated. (milliseconds elapsed since January 1, 1970)

},[tableDataRenderedTime])
...

performance.now()这是关于vs的一个很好的 SO 线程Date.now()。

performance.now()如果您需要测量更新表数据所花费的时间，这很有用。要在第一个useEffect钩子中这样做，您可以执行以下操作。

const [tableData,setTableData] = useState([]);

useEffect(() => {
...
  const t0 = performance.now();
  const data = await getData({...});
  setTableData(data);
  setTableDataRenderedTime(true);
  const t1 = performance.now();
  const duration = t1 - t0 // Time elapsed to load table data
...
});

推荐阅读