修改 DOM

Question

React 僅在 state 發生變化時才重新渲染。

那么為什么我直接看到我對真實 DOM 所做的更改呢？

我知道我正在修改真實的 DOM，但是當我根本沒有更改 state 時觸發重新渲染的是什么。

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";

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

我假設 React 會在看到 VirtualDOM 發生變化時重新渲染，在這種情況下它顯然會重新渲染。

我的問題是什么觸發了協調引擎，以便 React 計算出更改並重新呈現？

一種解釋是整個 DOM 正常重新渲染並且 React 有一個 DOM 的陳舊副本。

但在那種情況下，我想這應該發生

- 當下次 React 渲染時，它應該認為它有一個更新的副本並將顏色改回黑色。

Answer 1

React 不會重新創建整個真實 DOM 樹，而只會更新虛擬 DOM 中已更改的屬性，這就是使用虛擬 DOM 的全部目的。

“渲染”這個詞有時會被模棱兩可地使用，但在這里它的意思是渲染虛擬 DOM ，而不是渲染真實的 DOM 。

你在屏幕上看到的總是真實的 DOM，所以如果你直接改變真實的 DOM，你會立即看到變化，但 React 根本不參與這里。

如果你直接改變真實的 DOM，那么 React 對那個改變一無所知，也不會重新渲染。 虛擬 DOM 沒有改變。

當 React 下次重新渲染時（出於任何其他原因），React 檢查它的虛擬 DOM 中的color是否發生了變化，但是虛擬 DOM 中的color沒有變化，是black並且仍然是black ，所以 React 不會更新真實 DOM 中的color ，但保持原樣不變，即red 。