在react上访问dom

Question

这个

ReactDOM.render()

方法会将 HTML 或组件添加到 DOM，这与我们将节点附加到 DOM 时类似。考虑到这一点，在 React JS 中访问 dom 是一个很好的做法，如下面的代码示例：

function Component(){
  return(
     <h1 id="delete">"Hello World"</h1>
  );
}
div.render(<Component/>);

const h1 = document.getElementById("delete");
div.removeChild(h1)

在上面的示例中，

div.render

将向 DOM 添加一个组件，因为该组件已添加到 DOM，因此我可以通过 id 访问

h1

，然后删除

h1

。

但是这是一个好的做法吗？否则会造成什么问题？

Answer 1

我不知道你为什么要这么做。

但从技术上来说，React 有一个叫做 Virtual DOM 的东西，它基本上是 Real DOM 的影子副本。每当您进行更改时，React 都会更新 Virtual DOM，并使用 Diff 算法与 Ream DOM 交叉检查更改。一旦识别出差异，它将在 Real DOM 中呈现。这就是为什么 React 非常快，因为它只渲染所需的更改。

当你混合 React 和 Direct Real-DOM 操作时会发生什么？

1. 您的应用程序可能会因 DOM 处理过载而崩溃。
2. React 将覆盖实际 DOM 上的默认虚拟 DOM，因此可以看到不相关的更改或行为。