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。