反应可视化重新渲染/更新元素

Question

我正在使用 react 渲染数千个 svg 元素，并希望确保在输入更改的情况下完成最小渲染。有时会更新单个节点，因为我什么都没做shouldComponentUpdate，它应该重新渲染所有元素。我想知道是否有可用于可视化更改的包。我看到两个包裹

https://github.com/redsunsoft/react-render-visualizer

https://github.com/spredfast/react-transform-render-visualizer

但我真正追求的是本文中的方法

http://blog.atom.io/2014/07/02/moving-atom-to-react.html

怎么做到呢？任何可用的包？

Answer 1

Chrome 的 DevTools 中有一个设置，它提供了一个非常相似的可视化，称为Show paint rectangles或Paint Flashing。转到 DevTools 并按下键盘上的转义键。转到出现的面板中的渲染选项卡，然后选择“显示绘制矩形”或“绘制闪烁”：