javascript - 修改 DOM

Question

仅 react 当状态发生变化时重新渲染 .

那么为什么我会直接看到我对真实 DOM 所做的更改呢？

我知道我正在修改真实的 DOM，但是当我根本没有改变状态时触发重新渲染的是什么。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1 id="header">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
document.getElementById("header").style.color = "red";

沙盒网址 https://codesandbox.io/s/peaceful-chatelet-hbpmw

我假设当它看到 VirtualDOM 中的变化时 react 会重新渲染，在这种情况下它显然会重新渲染。

我的问题是 是什么触发了对帐引擎所以 react 计算出变化并重新渲染？

一种解释是整个 DOM 会正常重新渲染，并且 react 有一个过时的 DOM 副本。

但在那种情况下，我想这应该发生

- 下一次 react 渲染时，它应该认为它有一个更新的副本
并将颜色改回黑色。

Answer 1

React 不会重新创建整个 real-DOM 树，而只是更新虚拟 DOM 中已更改的属性，这就是使用虚拟 DOM 的全部目的。
“render”这个词有时用的很含糊，但这里的意思是渲染虚拟 DOM，而不是渲染真实的 DOM。
你在屏幕上看到的总是真实的 DOM，所以如果你直接改变真实的 DOM，你会立即看到变化，但这里根本不涉及 React。
如果你直接改变真实的 DOM，那么 React 对这个改变一无所知，也不会重新渲染。虚拟 DOM 没有改变。
当 React 下次重新渲染时(出于任何其他原因)，
React 检查 color它的虚拟 DOM 发生了变化，但是 color在虚拟 DOM 中没有改变，是 black仍然是 black ,
所以 React 不会更新 color在真实的 DOM 中，但只是让它保持原样，即 red .