javascript - 在 React 中操作 DOM

Question

我知道直接在 React 中操作 DOM 并不是一个好的做法。由于 React 协调引擎在比较虚拟 DOM 和真实 DOM 时会影响性能

但是如果我这样做呢？

场景仅用于解释问题。这种特定情况不需要答案，但这种做法一般有缺点

场景:1

state = {
   innerHTML : ""
}

document.getElementById("test").innerHTML = this.state.innerHTML

handleChange(){
  //...handles change in state
}

场景:2

state = {
    color:"red"
}

document.getElementById("test").style.color = this.state.color

handleChange(color){
    this.setState({color})
}

在这种情况下，React 意识到它需要重新渲染，因为我正在改变那里的状态 - 通过保持虚拟和真实 DOM 的一致性。

所以在所有这些我可以使用状态来保持一致性并对真实 DOM 进行更改的情况下，以这种方式对真实 DOM 进行更改仍然是一个坏主意吗？

Answer 1

您可以考虑使用 ReactRef 而不是直接操作 DOM，它更容易、更安全并且是最佳实践。

检查 here