javascript - 通过 setState 与直接 DOM 操作 react 重新渲染？

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 的这个领域有所了解，我将不胜感激，因为在大多数情况下，我正在寻找一些关于 React 中的性能协调的很酷的提示和输入。

提前致谢。

Answer 1

这正是 shouldComponentUpdate 的内容生命周期 Hook 是为创建的。如果你知道你的组件不应该总是重新渲染，那么你可以添加这个生命周期钩子(Hook)来检测哪个状态正在改变。如果您不关心它，您可以返回 false 并且 buildComplexHTMLFromData 函数永远不会运行。

编辑:

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