How to use react-addons-perf - 10 common examples

import { isLoaded as isAuthLoaded, load as loadAuth, logout } from '../../redux/modules/auth';
// export function isLoaded(globalState) {
//   return globalState.auth && globalState.auth.loaded;
// }
// 下面是loadAuth方法
// export function load() {
//   return {
//     types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
//     promise: (client) => client.get('/loadAuth')
//   };
// }
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import Header from "../../components/Header/index";
import Footer from "../../components/Footer/index";
Perf.start();
// const styles = require("./App.less");
 //(1)延缓容器的渲染直到异步的请求结束(该redux-async-connect返回一个promise，直到这个promise被resolve或者reject后才会渲染我们的react-router对应的组件树)
 //(2)保存数据到store中，同时将加载的数据connect到你的容器中~
 //也就是说，在加载这个页面之前我们要获取到所有的/loadInfo等以及用户是否登录等信息
 //获取到之后才会真正渲染页面~~~
@asyncConnect([{
  promise: ({store: {dispatch, getState},helpers}) => {
    // loadOnServer({...renderProps, store, helpers: {client}})
    // 这部分代码在服务端执行，是服务端在内网发送的ajax请求，因此没有filter属性，loadOnServer中不存在filter
    // 因此这里我们的promise函数中可以获取到helpers对象，其是一个{client:{ApiClient}}
    // console.log("App的@asyncConnect中的filter,helpers",filter);
    // console.log("App的@asyncConnect中的filter,helpers",helpers);
  //里面无法直接访问store，否则报错，里面调用getState得到的值参见
  //getState.js
  const promises = [];
  const state = getState();

export default store => next => action => {
  const key = `performance:${action.type}`
  Perf.start()

  // will re-render the application with new state
  const result = next(action)
  Perf.stop()

  console.group(key) //eslint-disable-line
  console.info('wasted') //eslint-disable-line
  Perf.printWasted()
  // any other Perf measurements you are interested in

  console.groupEnd(key) //eslint-disable-line
  return result
}

import React from 'react';
import ReactDOM from 'react-dom';
import Perf from 'react-addons-perf';
import ReactDemoApp from './ui/ReactDemoApp';

Perf.start(); // see https://facebook.github.io/react/docs/perf.html
const then = Date.now();
ReactDOM.render(, document.querySelector('#container'));
const now = Date.now();
Perf.stop();

// for NODE_ENV=production
console.log('Total render time:', now - then, 'ms');

Perf.printInclusive();
Perf.printExclusive();

import React from 'react';
import ReactDOM from 'react-dom';
import Perf from 'react-addons-perf';
import ReactDemoApp from './ui/ReactDemoApp';

Perf.start(); // see https://facebook.github.io/react/docs/perf.html
const then = Date.now();
ReactDOM.render(, document.querySelector('#container'));
const now = Date.now();
Perf.stop();

// for NODE_ENV=production
console.log('Total render time:', now - then, 'ms');

Perf.printInclusive();
Perf.printExclusive();

const dispatchMessage = (msg) => {
    // let timer = profiler.start('dispatchMessage');
    Perf.start();
    if (msg.type === RECEIVE_MESSAGE) {
        store.dispatch(newTabMaybe('Hub', 'hubMessages', ''));
    } else if (msg.type === RECEIVE_PRIVATE_MESSAGE) {
        store.dispatch(newTabMaybe(msg.from, 'privateMessages', msg.from));
    }
    store.dispatch(msg);
    Perf.stop();
    const measurements = Perf.getLastMeasurements();
    // Perf.printInclusive(measurements);
    Perf.printExclusive(measurements);
    Perf.printWasted(measurements);
    // timer.stop('dispatchMessage');
};

const dispatchMessage = (msg) => {
    // let timer = profiler.start('dispatchMessage');
    Perf.start();
    if (msg.type === RECEIVE_MESSAGE) {
        store.dispatch(newTabMaybe('Hub', 'hubMessages', ''));
    } else if (msg.type === RECEIVE_PRIVATE_MESSAGE) {
        store.dispatch(newTabMaybe(msg.from, 'privateMessages', msg.from));
    }
    store.dispatch(msg);
    Perf.stop();
    const measurements = Perf.getLastMeasurements();
    // Perf.printInclusive(measurements);
    Perf.printExclusive(measurements);
    Perf.printWasted(measurements);
    // timer.stop('dispatchMessage');
};

const dispatchMessage = (msg) => {
    // let timer = profiler.start('dispatchMessage');
    Perf.start();
    if (msg.type === RECEIVE_MESSAGE) {
        store.dispatch(newTabMaybe('Hub', 'hubMessages', ''));
    } else if (msg.type === RECEIVE_PRIVATE_MESSAGE) {
        store.dispatch(newTabMaybe(msg.from, 'privateMessages', msg.from));
    }
    store.dispatch(msg);
    Perf.stop();
    const measurements = Perf.getLastMeasurements();
    // Perf.printInclusive(measurements);
    Perf.printExclusive(measurements);
    Perf.printWasted(measurements);
    // timer.stop('dispatchMessage');
};

it('should not waste instances on scroll', (done) => {
      const COLUMNS_TO_SCROLL = 20;
      grid.selectCell({cellIdx: 0, rowIdx: 0});
      ReactPerf.start();

      doHorizontalScroll(0, 0, COLUMNS_TO_SCROLL, grid, onScrollComplete.bind(null, done), ScrollType.HORIZONTAL);
    });
  });

runTest() {
    let i = 0;
    Perf.start();
    return new Promise(resolve => {
      const execTest = () => {
        i += 1;
        setTimeout(() => {
          if (i < this.props.loops) {
            this.setTestProp(execTest);
          } else {
            Perf.stop();
            resolve(Perf);
          }
        }, 10);
      };
      execTest();
    });
  }

endTest() {
    const measurements = Perf.getLastMeasurements();
    const wasted = Perf.getWasted(measurements);

    const summary = {};

    summary.hasWastedTime = component => {
      const result = find(wasted, n => n.key.indexOf(`> ${component}`));
      if (result) {
        return (
          `${result.key} wasted ${result.inclusiveRenderDuration}ms ` +
          `across ${result.renderCount} renders`
        );
      }
      return false;
    };

    return this.props.onComplete(summary);