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') ); });
<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>