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>
}

现在，在输入框更改时设置状态将触发甚至重复执行复杂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的这个领域有所了解，我真的很感激，因为在大多数情况下，我正在寻找一些关于React中高效协调的一些很酷的提示和输入。

提前致谢。

Answer 1

这正是创建shouldComponentUpdate生命周期钩子的原因。如果您知道组件不应始终重新呈现，则可以添加此生命周期钩子以检测哪个状态正在更改。如果它是你不关心的东西，你可以return false和buildComplexHTMLFromData函数不会运行。

编辑：

他们还公开了一个名为PureComponent的基类，为你处理shouldComponentUpdate。

通过setState和直接DOM操作重新渲染？

1 个答案: