本文已参与「新人创作礼」活动，一起开启掘金创作之路。

作为前端开发，都遇到过性能问题，无论是使用vue,还是使用react，查找影响性能的因素有时是不太容易的。而性能对于用户体验有非常重要，所以有一个好的方法能准确知道各部分渲染的性能对于我们开就非常重要了，最近学习react，发现里面有一个非常好的api可以知道组件每次渲染的性能，在此记录一下

Profiler

在react文档中的高级指引中有一个API名为Profiler，这个API是react中内部自带的，它是干什么的呢？它能够测量渲染一个react应用多久渲染一次以及渲染一次的代价，说白了就是它能够监测一个组件渲染的时机以及渲染的时间。这就很厉害了，以后想要查找某个组件的渲染时间直接使用这个api就可以了

使用方法

profiler的使用方法非常简单，它能够在任何地方使用，它需要两个prop:一个是id，一个是回调函数onRender

// app.js
import React, { Profiler } from 'react';
import Person from './person'
const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {

}
function App() {
    return (
        <Profiler id="person" onRender={onRender}>
            <Person />
        </Profiler>
    )
}
React.render(
    <App />,
    document.getElementById('app')
);

function Person() {
    return (
        <div>子组件</div>
    )
}
export default Person;

id：区别每个组件
onRender: 是组件渲染完成后的回调，其内部返回一些参数信息
id: 当前包裹组件的profiler的id

phase: 有两个值："mount" （如果组件树刚加载）或者 "update" （如果它重渲染了）之一

actualDuration: 本次更新在渲染 Profiler 和它的子代上花费的时间。这个数值表明使用 memoization 之后能表现得多好。（例如 React.memo，useMemo，shouldComponentUpdate）。理想情况下，由于子代只会因特定的 prop 改变而重渲染，因此这个值应该在第一次装载之后显著下降

baseDuration: 估计不使用 memoization 的情况下渲染整颗子树需要的时间

startTime: 本次更新中React开始渲染时间

commitTime: 本次更新中 React commit 阶段结束的时间戳。在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组

interactions: 属于本次更新的 interactions 的集合

以上就是Profiler API的所有内容，是不是非常简单，只要看一遍就能够理解并上手了，快来试试吧，以后再也不用为如何查找性能原因而烦恼了

以前是土地兼并，现在是房产兼并，商业兼并

react学习-profiler(监控组件渲染性能)

Profiler

使用方法