日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 Profiler

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供二道江企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為二道江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

Code SandBox

可以前往

https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在線(xiàn)編輯效果。

Profiler 是 React 中的一個(gè)組件，由 B. Vaughn 開(kāi)發(fā)，它可以測(cè)量 React 應(yīng)用渲染的頻率和渲染所花費(fèi)的時(shí)間資源。Profiler 提供一個(gè)函數(shù)屬性 onRender，當(dāng)組件 mount 或者 update 的時(shí)候，這個(gè)函數(shù)會(huì)接受到一些時(shí)間指標(biāo)。用這些時(shí)間指標(biāo)你就可以發(fā)現(xiàn)效率低下的代碼了。

 
 
 

  
  
  
import React, { Profiler } from 'react';
  
  
  

  
  
  
...
  
  
  

  
  
  
  
  
  
  

 
 
 

id 用來(lái)標(biāo)識(shí)對(duì)應(yīng)的 Profiler 組件，onRender 函數(shù)會(huì)在組件 mount 或者 update 的時(shí)候執(zhí)行，它的參數(shù)結(jié)構(gòu)如下：

 
 
 

  
  
  
function onRenderCallback(  id,
  
  
  
  phase,
  
  
  
  actualDuration, 
  
  
  
  baseDuration,
  
  
  
  startTime,
  
  
  
  commitTime,) {
  
  
  
  console.log('onRenderCallback', {
  
  
  
    id,
  
  
  
    phase,
  
  
  
    actualDuration, 
  
  
  
    baseDuration,
  
  
  
    startTime,
  
  
  
    commitTime,
  
  
  
  })
  
  
  
}
 
 
 

• id 組件 id;
• phase 執(zhí)行階段，mount 或者 update;
• actualDuration Profiler 和子組件渲染當(dāng)前的更新所花費(fèi)的時(shí)間，這個(gè)值在首次 mount 的時(shí)候比 update 階段的值大;
• baseDuration 子組件最近一次渲染所持續(xù)的時(shí)長(zhǎng)
• startTime 開(kāi)始渲染當(dāng)前的更新的時(shí)間戳
• commitTime React 提交當(dāng)前更新的時(shí)間戳

這些數(shù)據(jù)可以幫助我們分析組件運(yùn)行的效率，找到性能瓶頸。

React Developer tools

React Developer tools 是 React 官方團(tuán)隊(duì)發(fā)布的一個(gè)瀏覽器插件，功能十分強(qiáng)大。我要介紹的是 Highlight Update 這個(gè)功能。這個(gè)工具用來(lái)檢測(cè)組件重復(fù)渲染非常有效。他可以用不同的顏色來(lái)標(biāo)識(shí)組件的邊框，顏色越黃表示這個(gè)組件重復(fù)渲染的次數(shù)越多。

如果你有一個(gè)組件樹(shù)像下面這樣：

如果 Main 組件重復(fù)渲染了，那么封裝 Counter 和 Count 組件的邊界就會(huì)出現(xiàn)一個(gè)邊框表示重復(fù)渲染。

我們激活這個(gè)特性之后,在 ReactJS 官網(wǎng)開(kāi)啟關(guān)閉右側(cè)的菜單，會(huì)出現(xiàn)邊框提示：

如何激活這個(gè)特性呢?找到調(diào)試工具的 Components 一欄，點(diǎn)擊右上角的小齒輪，再選中彈窗中的 Highlight updates when components render.

邊框的類(lèi)型取決于重復(fù)渲染的程度，重復(fù)渲染越多，顏色越深。

 
 
 

  
  
  
|    綠色 - 低頻次更新
  
  
  
|    藍(lán)色 - 一般頻次更新
  
  
  
v    紅色 - 高頻次更新
 
 
 

通過(guò)使用這個(gè)工具，我們可以通過(guò)邊框顏色來(lái)輕易找到有性能問(wèn)題的組件，并對(duì)它做針對(duì)性的優(yōu)化。

why-did-you-render

https://github.com/welldone-software/why-did-you-render,這個(gè)工具是由 Welldone Software 開(kāi)發(fā)的，用來(lái)對(duì)組件重復(fù)渲染給出反饋。

它會(huì)對(duì)組件的 props 做 diff，如果組件重新渲染了，但是 props 并沒(méi)改變，它會(huì)在命令行提醒你 props 并沒(méi)有變化。

重復(fù)渲染在小型應(yīng)用中影響可能不大，但是在大型項(xiàng)目中將肯定會(huì)有影響。

這個(gè)工具嵌入到了 React 組件的生命周期中，所以他能在組件重新渲染時(shí)比對(duì) props 是否變化。

使用方法很簡(jiǎn)單，先安裝

 
 
 

  
  
  
npm install @welldone-software/why-did-you-render --save
 
 
 

然后注冊(cè)一次：

 
 
 

  
  
  
whyDidYouRender(React, {
  
  
  
  trackAllPureComponents: true
  
  
  
});
 
 
 

然后對(duì) class component：

 
 
 

  
  
  
class Counter extends React.Component {
  
  
  
  static whyDidYouRender = true;
  
  
  
  render() {
  
  
  
   //...
  
  
  
  }
  
  
  
}
 
 
 

對(duì)函數(shù)組件：

 
 
 

  
  
  
function Counter() {
  
  
  
  return(
  
  
  
   // ...
  
  
  
  )
  
  
  
}
  
  
  
Counter.whyDidYouRender = true;
 
 
 

下面是一個(gè)完整的例子，每次 setState 時(shí)候，style={{ width: "100%" }} 都是一個(gè)新的值，所以會(huì)觸發(fā)比對(duì)。

 
 
 

  
  
  
import React from "react";
  
  
  
import "./styles.css";
  
  
  
const whyDidYouRender = require("@welldone-software/why-did-you-render");
  
  
  
whyDidYouRender(React, {
  
  
  
  trackAllPureComponents: true
  
  
  
});
  
  
  
export default class App extends React.Component {
  
  
  
  constructor() {
  
  
  
    super();
  
  
  
    this.state = {
  
  
  
      count: 1
  
  
  
    };
  
  
  
  }
  
  
  
  render() {
  
  
  
    return (
  
  
  
      
  
  
  
         this.setState({ count: this.state.count + 1 })}>
  
  
  
          add
  
  
  
        
  
  
  
        
{this.state.count}