react_renderPerformanceTest

react render Performance Test

by Ryan Hsu

HTML

<h1>Performance Test</h1>
<h2>跑1000筆資料，Render畫面時間</h2>
<h3>React效能測試</h3>
<input id='run' type='button' value='執行' />測試結果：<span id='runtime'>0</span>
<div id="app"></div>

Babel + JSX

var starttime;

//產生1000比資料
function buildData(){
	var data = [];
  for(var i = 0; i < 1000; i++) {
  	data.push(i);
  }
	return data;
}

//React component
class TodoApp extends React.Component {
  render() {
    const todoItems = buildData().map((data,idx) => {
      return (
        <li key={idx}>{data}</li>
      );
    }); 

    return (
      <ul>
        {todoItems}
      </ul>
    );
  }
  
  componentWillMount() {
    console.log('第一次 render 前');
    starttime = new Date();
  }
  
  componentDidMount() {
    console.log('第一次 render 後');
    document.getElementById('runtime').innerHTML = (new Date() - starttime) + 'ms';
  }
  
  componentWillUpdate() {
     console.log('第 N 次 render 前');
  }
 
  componentDidUpdate() {
     console.log('第 N 次 render 後');
  }
}

var runReact = document.getElementById("run");
runReact.addEventListener("click", function() {
	//React render開始
	React.render( <TodoApp> hello, America < /TodoApp>,
  	document.getElementById('app')
  );
});