通过setstate vs direct dom操纵反应重新渲染

Question

我已经与React合作了大约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>
}

现在，在输入框上设置状态更改也将触发复杂的JavaScript的buildComplexHTMLFromData方法。我听说React通过在DOM之间扩散到有效重新渲染来做一些聪明的事情，但无论如何都执行了此JavaScript。

另一方面，使用sendDataToBackend方法可以实现相同的功能，如下图所示。但是，这可以确保仅更改目标输入元素而不触摸已渲染的元素或在buildComplexHTMLFromData方法上执行任何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的和解范式的多个文章，但似乎并没有解决这个问题。

我真的很感激是否有人能向这一反应区域散发出一些启示，因为在大多数情况下，我正在寻找一些关于React的表现和解的很酷的技巧和输入。

预先感谢。

Answer 1

这正是shouldComponentUpdate生命周期钩的目的。如果您知道您的组件不应总是重新渲染，则可以添加此生命周期钩以检测哪个状态正在发生变化。如果您不在乎它，则可以return false，并且buildComplexHTMLFromData功能永远不会运行。

编辑：

他们还公开了一个名为PureComponent的基类，该基类在引擎盖下为您处理shouldComponentUpdate。