目錄

介紹

用途

安裝

外掛安裝

使用

註冊觀察者

1.安裝微伺服器

2.配置引數

測試

介紹

React Performance Devtool是一個瀏覽器擴充套件，用於檢查React元件的效能。它根據使用視窗的React收集的措施對React元件的效能進行統計分析。效能的API。

用途

• 刪除或解除安裝未使用的元件例項.

• 檢查什麼是阻塞或在操作開始後花費更多的時間

• 檢查該表並檢視需要為哪些元件編寫shouldComponentUpdate生命週期鉤子.

• 檢查哪些元件需要花費更多的時間來載入

安裝

外掛安裝

• Chrome extension 
• Firefox extension

安裝NPM模組

npm install react-perf-devtool  --save-dev

Note:在使用瀏覽器擴充套件之前，請先安裝NPM模組

使用

註冊觀察者

const { registerObserver } = require('react-perf-devtool');

window.observer = registerObserver({}, callback)
//.tsx檔案中 (window as any).observer=registerObserver();
function callback(mesasure: any) {}
 

Note:只應該在開發模式中使用，當您需要檢查React元件的效能時。確保在生產過程中移除它

將資訊列印到控制檯

1.安裝微伺服器

npm install --save micro

2.配置引數

//React index檔案中(我用的是.tsx檔案)，如果是.js檔案則去掉型別判斷就可以

import React from "react";
import ReactDOM from "react-dom";
// import './index.css';
import App from "./App";
import * as serviceWorker from "./serviceWorker";

const { registerObserver } = require("react-perf-devtool");

const option = {
  shouldLog: true,
  prot: 8080,
  timeout: 12000
} as any;
function callback(measures: any) {}
//將觀察者分配到全域性
(window as any).observer = registerObserver(option, callback);

ReactDOM.render(<App />, document.getElementById("root"));
//server.js
const { json } = require("micro");
export default async (req: any) => {
  console.log(await json(req));
  return 200;
};
 

//package.json

{
  "main": "server.js",
  "scripts": {
    "start-micro": "micro -p 8080"
  }
}

測試

關於測試後面更新...