react教程，如何利用performance记录代码的运行时间？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在react代码中，偶尔会有记录代码运行时间的需求。通常思路上来说，就是先记录一个开始时间，然后再记录一个结束时间，然后两者做差值。但是，在node里面，有个原生的performance.now()，直接输出就是这个差值，比较的好用。

苏南大叔的程序如此灵动，记录苏南大叔和计算机代码的故事。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。performance.now()放在普通的js代码里面也可以，只不过本文中用于react项目。

测试代码

测试代码如下：

import React, { useLayoutEffect, useState } from "react";
const Sunan = () => {
    const [state, setState] = useState("苏南大叔");
    useLayoutEffect(() => {
        console.log(performance.now());
        // let a = "a";
        ; (async (amount) => {
            const data = await fetchCount(amount);
            console.log("await返回");
            setState("苏南大叔说："+data);
        })();
        console.log("async是个异步");
    });
    return (
        <div>{state}</div>
    );
};
export default Sunan;
function fetchCount(amount = 1) {
    return new Promise((resolve) =>
        setTimeout(() => resolve(amount + 1), 3000)
    );
}

顺便回顾一下useLayoutEffect的用法：

• https://newsn.net/say/react-uselayouteffect.html

这个匿名函数来自这里：

• https://newsn.net/say/node-promise.html

虽然名字是.now()，但是输出的并不是时间戳，而是个时间戳的差值。

代码解说

本文的测试例子，诸多意料之外的运行结果，非常适合拿来做面试题。

1、本文的useLayoutEffect例子，虽然也发生了文字闪动的问题。但是，这个闪动是由async这个异步函数引起的。而不是useLayoutEffect这个同步函数引起的，这不是它的效果。
2、async是个异步，要等待里面的await的结果返回。
3、fetch函数是个模拟的可控的延时函数。
4、performance.now()输出的并不是当前时间戳。
5、分号的问题，被webpack处理过之后，会出现意外的报错，非常意外。

结束语

react经验文字，请点击：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。