React.js：javascript vs reactjs DOM操作

我是React.js的新手。我試圖量化html文檔完全呈現所需的時間。有人請告訴我，我的方法是錯誤的，我發現結果根本沒有可比性。React.js：javascript vs reactjs DOM操作

使用陣營

var UList = React.createClass({ 
    setText: function(){ 
    var updatedItems = this.state.items; 
    var item = Math.abs(Math.random().toString().split('') 
    .reduce(function(p,c){return (p<<5)-p+c})).toString(36).substr(0,11);; 

    updatedItems.push(item); 
    this.setState({items: updatedItems}); 
    }, 
    getInitialState: function(){ 
    return { 
     items: [] 
    } 
    }, 
    render: function(){ 
    return ( 
    <div id='component'> 
     <button id='bb' type="button" onClick={this.setText}>Set</button>  
     <List items={this.state.items}/> 
    </div> 
    ); 
    } 
}); 

var List = React.createClass({ 
    render: function(){  
    return (
     <ul> 
     { 
     this.props.items.map(function(item) { 
      return <li key={item}>{item}</li> 
     }) 
     } 
     </ul> 
    ) 
    } 
}); 
ReactDOM.render(<UList text="kiran"/>, document.getElementById('container')); 

console.log(new Date()); 

for(var i=0;i<1000;i++) 
    document.getElementById("bb").click(); 


console.log(new Date());

使用JavaScript

setText = function(){ 
    var item = Math.abs(Math.random().toString().split('') 
    .reduce(function(p,c){return (p<<5)-p+c})).toString(36).substr(0,11); 

    var node = document.createElement("LI"); 
    var textnode = document.createTextNode(item); 
    node.appendChild(textnode); 
    document.getElementById("myList").appendChild(node); 
    }; 

    console.log(new Date()); 

    for(var i=0;i<1000;i++) 
    document.getElementById("bb").click(); 

    console.log(new Date());

來源

2015-10-19 Kiran

你是什麼意思*'根本不可比'*？在這個例子中反應較慢？順便說一句：在你的'setText（）'函數中，你直接更新狀態（反應不喜歡）：當你執行'updatedItems.push（）'時，你改變了updatedItems。該變量是指向狀態的指針，因此您更新狀態。最好是使用：'var updatedItems = this.state.items.slice（）;' – wintvelt

@wintvelt感謝您的快速回復。是反應較慢。我不明白「你的setText（）函數中你直接更新狀態的部分」 – Kiran

你當前的'.push（）'語句也改變了'this.state'變量。當你改變'this.setState（）'之外的狀態時，React不喜歡它。你應該改變'var updatedItems = this這一行。state.items;'to：'var updatedItems = this.state.items.slice（）;'（注意在最後添加的片段用於複製數組）。 – wintvelt

在此特定情況下，反應可在處理1000次的點擊整體慢。你在本質上測量的是1次點擊和1次更新之間的循環時間。在你的一對一比較中，直接的javascript DOM更新可能會更快（也許直接從服務器渲染HTML會更快）。一些注意事項：

週期時間是不是在比較性能的唯一因素：做DOM更新時，在許多情況下，反應可以留下更多的CPU時間對於用戶來說，例如在更新反應時滾動。這不是通過你的測試來衡量的。
反應真的很明顯是在做更新：如果你刪除，更新，在1000列表中添加許多不同的項目，反應可能比純JavaScript變體快得多。

UPDATE：一個爲Facebook建立的關鍵原因是反應典型，因爲DOM更新很慢。所以通過它的diff引擎來最小化DOM更新。

如果您想了解更多關於性能的信息，請點擊look here來比較反應與角度vs淘汰賽。

This video來自一個角度會議讓我意識到性能要比循環時間多得多：在一個循環中不同過程的行爲有着重要的意義。

一個樣本測試版本（漂亮乾淨）Rich Ayotte here，與原始javascript相比也有反應。它顯示原始JavaScript實際上比反應更快（在呈現長列表中）。

底線：

爲小型和簡單的應用程序，生吃可能更快
，但如果你也想保持性能，如果你的應用程序的增長更大，更復雜的，反應是一個安全的賭注。

來源

2015-10-19 12:13:33 wintvelt

再次感謝。如果我正確理解你，你的意思是說，如果已經有1000個元素的初始狀態，並且如果我刪除或選擇了1000個元素中的幾個元素，reactjs會更快。是這樣嗎？ – Kiran

是的，反應是***真***快。更新回答，並提供一些鏈接，提供有關反應績效的更多信息 – wintvelt

但是，如果優先考慮這方面，則有更快的替代方案。例如。 http://mithril.js.org/ –

React.js：javascript vs reactjs DOM操作

回答

相關問題