React通過setState重新渲染還是直接DOM操作？

Question

我一直在使用6個月左右的反應，總是用來打擾我的東西是重新呈現工作的方式。

下面是有一個輸入框，並把數據發送到被一些其他形式以及從未使用或更改很少多個幾乎靜態的HTML元素，其值與服務器的傳統組件。我說的很少，因爲可以在componentWillMount()方法中構建靜態元素並將其存儲在變量中。但是對於這個問題稍微多一點，渲染應該包含對buildComplexHTMLFromData方法的調用。

buildComplexHTMLFromData = (data) => { 
    // Lot of javascript to build the boxes based on the initial or data 
    // that changes so rarely 
    // array.map.filter.find etc. 
    return (
    <div> 
     //Complex HTML element 1 
     //Complex HTML element 2 
     //.... 
     //.... 
     //Complex HTML element n  
    </div> 
) 
} 

sendDataToBackend = (event) => { 
    this.setState(
    { value: event.target.value }, 
    () => this.functionThatSendsDataToBackend() 
) 
} 

render() { 
    <div> 
    // Active input that sends data to the backend 
    <input 
     value={this.state.value} 
     onChange={this.sendDataToBackend} 
    /> 
    {this.buildComplexHTMLFromData()}  
    </div> 
} 

現在設置狀態時輸入框的變化甚至會引發buildComplexHTMLFromData方法一遍做複雜的JavaScript。我聽說React通過在DOM中進行區分以有效地重新渲染而做出了一些聰明的事情，但是無論如何這個JavaScript都會被執行。

在另一方面相同的功能可以用兩個品種​​3210方法作爲顯示在下面的代碼段來實現。然而，這確保只有目標輸入元素被改變而不觸及已經呈現的元素或者在方法上執行任何JavaScript。

buildComplexHTMLFromData = (data) => { 
    // Lot of javascript to build the boxes based on the initial or data 
    // that changes so rarely 
    // array.map.filter.find etc. 
    return (
    <div> 
     //Complex input box 1 
     //Complex input box 2 
     //.... 
     //.... 
     //Complex input box n  
    </div> 
) 
} 

sendDataToBackend = (event) => { 
    //First strategy 
    var element = document.getElementById("persistable-input"); 
    element && element.value = event.target.value 

    //Second strategy 
    this.persistableInput.value = event.target.value 
} 

render() { 
    <div> 
    // Active input that sends data to the backend or for other forms 
    <input 
     id="persistable-input" 
     ref={(elem) => { this.persistableInput = elem }} 
     value={this.state.value} 
     onChange={this.props.persistedValue} 
    /> 
    {this.buildComplexHTMLFromData()}  
    </div> 
} 

我不知道如果我失去了一些東西，如果這是對性能很小，但我覺得它可能是相當繁重複雜的部件。我看了多篇關於React和解模式的文章，但似乎沒有解決這個問題。

我會很感激，如果任何人都可以提供一些線索進入這個領域反應，因爲我找的高性能和解一些很酷的技巧和投入，在大多數情況下，發生反應。

在此先感謝。

Answer 1

這也正是shouldComponentUpdate生命週期掛鉤是爲創建。如果你知道你的組件不應該總是重新渲染，那麼你可以添加這個生命週期鉤子來檢測哪個狀態正在改變。如果你不在乎的東西，你可以return false和buildComplexHTMLFromData函數永遠不會運行。

編輯：

他們還揭露稱爲PureComponent一個基類，引擎蓋你在處理shouldComponentUpdate。