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

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

苏南大叔:react教程,如何利用performance记录代码的运行时间? - react-performance
react教程,如何利用performance记录代码的运行时间?(图2-1)

苏南大叔的程序如此灵动,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2performance.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的用法:

这个匿名函数来自这里:

苏南大叔:react教程,如何利用performance记录代码的运行时间? - 运行截图
react教程,如何利用performance记录代码的运行时间?(图2-2)

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

代码解说

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

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

结束语

react经验文字,请点击:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react