Javascript react中的DOM操作

我知道在react中直接操作DOM被认为不是一个好的实践。当比较虚拟DOM和真实DOM时，As react协调引擎将影响性能

但是如果我做了这样的事情呢

显示的场景仅用于解释问题。对于这一特定场景，不需要回答，但对于这种做法，一般都有缺点

情景：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进行更改是否仍然是一个坏主意？

在这种情况下，与其直接设置

innerHTML

，不如使用：

---

在代码中的某个时刻，可能在

componentdiddupdate（）

中，然后再次调用

render（）

（当您更新状态或父组件重新呈现时），您的更改将被覆盖，因此您需要不断地更新它，这可能会产生一个小而明显的闪光并降低性能，由于每个渲染都必须更新DOM 2次（一次来自React，另一次来自

innerHTML

）。

您可以研究使用ReactRef，而不必直接操作DOM，这更简单、更安全，也是最佳做法

---

检查

更好的是，使用避免使用dSIH的库之一。我知道这一点。但我用这个例子询问这样一个场景是否是有效的解决方案。我不是专门面对这个问题。但是感谢您的努力：）@kooskoos检查更新的答案，我已经添加了更多关于您所问方法缺点的详细信息。正如我看到的，setState是异步的。因此，当我声明更改不会立即发生时，真实的DOM将被更改，而当react重新呈现虚拟DOM时，虚拟DOM也将更改。你是否也可以检查一下我添加的场景，直接在DOMI中更改样式？我想知道这是否是个好主意。我已经知道了其他的解决办法。感谢您的帮助：）是的，React中的直接DOM操作非常反模式。

class Component extends React.Component {
  state = {
    innerHTML: '',
  }

  handleChange() {
    this.setState({ innerHTML: '...' });
  }

  render() {
    return <div dangerouslySetInnerHTML={ { __html: this.state.innerHTML } }></div>;
  }
}

document.getElementById('test').innerHTML = this.state.innerHTML;