2018-10-08：監控 react.component why (re)render.md

react-global-render-visualizer

用的很順手，這邊也紀錄一下利用 react-global-render-visualizer lib 來監控 React.Component 的 render 行為。

使用方法

// 1. import visualizeRender 進來
import { visualizeRender } from 'react-global-render-visualizer';

@visualizeRender() // 2. 以 @decorator 的方式放在 class 宣告的上一行
class ListArticleContainer extends PureComponent {
  componentDidMount() {
  ...

// 2. 或者在 compose 加入
const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
　...,
  visualizeRender(),
);

export default enhance(ListArticleContainer);

這樣在網頁上就能看到該 component 被監控 render 行為