您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　5.1.1 发现浪费的渲染时间

　　为了发现这个问题，需要在Chrome浏览器中安装React Perf扩展，在第4章第6节介绍了安装React Perf的方法。

　　在Chrome浏览器中打开Todo应用的页面，执行下列步骤可以发现性能问题所在。

　　1）添加两个待办事项，文字分别为First和Second；

　　2）打开开发者工具，切换到Perf，这是React Perf工具界面，确保wasted选项被勾选；

　　3）点击React Perf工具左侧的Start按钮，开始性能测量，这时按钮会变成Stop按钮；

　　4）勾选Todo应用中的First那一项，让它变成完成状态；

　　5）点击React Perf工具左侧的Stop按钮，结束性能测量，界面上会显示测量结果。

　　完成上面的步骤之后，应该可以看到如图5-1的界面。

　　图5-1 React Perf发现Todo应用中的浪费渲染时间

　　在React Perf工具中，可以看见发现了浪费的渲染过程，React Perf工具记录在点击Start按钮和Stop按钮之间的所有React渲染，如果有组件计算Virtual DOM之后发现和之前的Virtual DOM相同，那就认为是一次浪费。注意，这里说的浪费是计算Virtual DOM的浪费，并不是访问DOM树的浪费。

　　在上面的例子中，发生浪费的那一条Owner是TodoList，Component是TodoItem，意思就是父组件TodoList渲染一个子组件TodoItem是浪费的。

　　在这个操作过程中，页面上只有First和Second两个TodoItem，First被标记为“完成”状态，对应的界面有改变，所以不可能有浪费；而Second没有界面改变，所以浪费只能是渲染Second导致的。 深入浅出React和Redux