推荐几个 React 性能优化工具( 二 ) _React

下面是一个完整的例子，每次 setState 时候，style={{ width: "100%" }} 都是一个新的值，所以会触发比对。
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 ( <div className="App"> <button onClick={() => this.setState({ count: this.state.count + 1 })}> add </button> <p>{this.state.count}</p> <Comp style={{ width: "100%" }} /> </div> ); }}function Comp(props) { return <div>100</div>;}Comp.whyDidYouRender = true;前往 Code SandBox 测试
https://codesandbox.io/s/distracted-architecture-t9ih2?file=/src/App.js 。
Performance timeline (Browser profiling)这个工具是 Chrome 自带的调试工具，在 Performance 一栏中。
它可以非常有效地查看严重重复渲染的组件，它也可以很方便地查看 UI 不必要的更新及其出现的频次。
在使用工具之前，先以开发模式把你的 React app 启动起来。
然后，打开开发者工具，切换到 Performance 面板。

文章插图

点击中间的圆点或者用快捷键 command + e，开发者工具就开始录制了，然后你可以在你的应用中做一些交互动作。
建议录制时间在 20 秒以上，时间到了之后，点击中间的 stop，或者左上角红点。

文章插图

然后我们就可以看到时间线了。

文章插图

我们可以滑动选择一片区域，然后通过 W 放大或者通过 S 缩小。选中一片区域，通过 W 键一直放大。

文章插图

每个橙色的条代表一个执行过程，在这个条中你可以看到组件名、组件执行的阶段、以及执行时间。在上面这张图片中，App 的执行阶段是 update 阶段，这表示 App 组件这段时间是在执行更新操作，执行所耗费的时间是 1.71 ms 。
【推荐几个 React 性能优化工具】组件每次渲染的时候一个新的黄条就会生成，如果一个组件多次渲染，通过这个 Timings 图表可以让你更容易追因。每个黄条的长度表示组件的执行时间，黄条越长，执行时间也越长。你可以使用这个工具来诊断页面。