實際上, React
使用 Virtual
DOM
做優化,在內部已經儘可能的減少了真實 DOM
操作,然而還是可以做一些優化。從工具方面,可以使用以下幾種工具檢測我們的代碼性能。
轉載https://wulv.site/2017-07-01/react-perf-tools.html
React Developer Tools for Chrome
這是一個 Chrome
插件,主要用來檢測頁面使用的 React
版本是否是 Production
版本, development
版本會對代碼不規範的的地方打印出 warning
,這些提示其實是很浪費性能的。React
Developer Tools for Chrome可以檢測到底使用的是哪個版本,如果插件的背景色是暗黑色的,表示使用 Production
版本:
如果是紅色的,表示 development
版本:
Chrome Performance Tab
React 15.4.0
添加一個查看各組件加載開銷詳情圖表的特性:
- 在
url
中添加查詢參數?react_perf
。比如http://localhost:3000/?react_perf
- 打開
Chrome
開發工具的Performance
窗口,點一下Record
。 - 記錄你需要分析的操作,最好不要超過20秒。
- 停止記錄
- 在
User Timing
裏查看記錄的事件。
react-addons-perf
react-addons-perf這是 React
官方推出的一個性能工具包,可以打印出組件渲染的時間、次數、浪費時間等。
1 2 3 4
|
安裝 yarn add react-addons-perf --save 引入 import Perf from 'react-addons-perf';
|
主要以下幾個 API
:
1 2 3 4 5 6 7 8 9 10
|
// 開始記錄 Perf.start() // 結束記錄 Perf.stop() // 獲取上次記錄 const measurements = Perf.getLastMeasurements() // 打印總時間 Perf.printInclusive(measurements) // 打印浪費時間 Perf.printWasted(measurements)
|
這裏有一個 Chrome
插件React
Perf,可以在 Chrome Devtools Panel
添加一個 tab
快速的查看打印日誌。
注意:此插件需要在全局變量暴露
Perf
12 import Perf from 'react-addons-perf'window.Perf = Perf
why-did-you-update
why-did-you-update會比較組件的 state
和 props
的變化,如果兩次渲染值是沒有改變的,會提示去避免re-render
。
1 2 3 4 5 6 7 8 9
|
#安裝 npm install --save-dev why-did-you-update # 使用 import React from 'react' if (process.env.NODE_ENV !== 'production') { const {whyDidYouUpdate} = require('why-did-you-update') whyDidYouUpdate(React) }
|
這個包在React 15.6.0
好像有點問題,需要添加一下代碼才能工作,這個 bug
即將修復。
1 2 3 4 5 6
|
let createClass = React.createClass; Object.defineProperty(React, 'createClass', { set: (nextCreateClass) => { createClass = nextCreateClass; } });
|
react-perf-tool
eact-perf-tool以柱形圖的方式比較直觀的展現組件浪費的時間。(感覺並不好用)
1
|
yarn add --save-dev react-perf-tool
|
1 2 3 4 5 6 7 8 9 10 11 12
|
import ReactPerfTool from 'react-perf-tool'; import Perf from 'react-addons-perf'; // Import styles if they don't get loaded already import 'react-perf-tool/lib/styles.css'; export default function YourApp(props) { return (<div className="your-app"> {/*...yourApp */} <ReactPerfTool perf={Perf} /> </div>); }
|
自己寫一個組件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
|
// PerfProfiler/index.js import React from 'react'; import Perf from 'react-addons-perf'; import './style.css'; class PerfProfiler extends React.Component { constructor(props) { super(props); this.state = { started: false }; } toggle = () => { const { started } = this.state; started ? Perf.stop() : Perf.start(); this.setState({ started: !started }); } printWasted = () => { const lastMeasurements = Perf.getLastMeasurements(); Perf.printWasted(lastMeasurements); } printOperations = () => { const lastMeasurements = Perf.getLastMeasurements(); Perf.printOperations(lastMeasurements); } render() { const { started } = this.state; return <div className="perf-profiler"> <h1>Performance Profiler</h1> <button onClick={this.toggle}>{started ? 'Stop' : 'Start'}</button> <button onClick={this.printWasted}>Print Wasted</button> <button onClick={this.printOperations}>Print Operations</button> </div>; } } export default PerfProfiler;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
/* PerfProfiler/style.css */ .perf-profiler { display: flex; flex-direction: column; position: absolute; right: 50px; top: 20px; padding: 10px; background: #bada55; border: 2px solid black; text-align: center; } .perf-profiler > h1 { font-size: 1.5em; } .perf-profiler > button { display: block; margin-top: 10px; padding: 5px; }
|
引用組件:
1 2 3 4 5 6 7 8
|
import PerfProfiler from './PerfProfiler'; export default function YourApp(props) { return (<div className="your-app"> {/*...yourApp */} <PerfProfiler /> </div>); }
|