英文:
Modifying the DOM
问题
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
我假设React仅在看到虚拟DOM中的更改时才重新渲染，显然在这种情况下进行了重新渲染。
我的问题是是什么触发了协调引擎，以便React发现变化并重新渲染？
一个解释是整个DOM通常会重新渲染，而React有一个陈旧的DOM副本。
但在这种情况下，我想下次React进行渲染时，它应该认为它有一个已更新的副本，然后将颜色更改为黑色。
英文:
React only re-renders when there is a change in state.
So why is that I see the changes I have made to real DOM directly?
I understand I am modifying the real DOM, but what is triggering the re-render when I have not changed the state at all.
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";
Sanbox url https://codesandbox.io/s/peaceful-chatelet-hbpmw
I assumed react re-renders whenever it sees changes in VirtualDOM, it clearly re- renders in this scenario.
My question is what is triggering the reconciliation engine so that react figures out the change and re-renders?
One explanation would be the entire DOM re-renders normally and react has a stale copy of the DOM.
But in that case I suppose this should happen
- When next time react renders it should think it has an updated copy
and change the color back to black.
答案1
得分: 2
React不会重新创建整个真实DOM树，而只会更新虚拟DOM中已更改的属性，这是使用虚拟DOM的主要目的。
单词“render”有时使用含糊不清，但在这里它的意思是“渲染虚拟DOM”，而不是“渲染真实DOM”。
屏幕上看到的始终是真实DOM，因此如果直接更改真实DOM，您会立即看到该更改，但React完全不涉及此处。
如果直接更改真实DOM，则React不会知道该更改，也不会重新渲染。虚拟DOM不会更改。
当React下一次重新渲染（出于任何其他原因）时，React会检查其虚拟DOM中的“color”是否已更改，但虚拟DOM中的“color”未更改，仍然是“black”，因此React不会更新真实DOM中的“color”，而只会保持不变，即当前的“red”。
英文:
React doesn't re-create the whole real-DOM tree, but only updates the properties that have changed in the virtual DOM, which is the whole purpose of using a virtual DOM.
The word "render" is used ambiguously sometimes, but here it means render the virtual DOM, and not render the real DOM.
What you see on the screen is always the real DOM, so if you change the real DOM directly, you see that change immediately, but React is not involved here at all.
If you change the real DOM directly, then React doesn't know anything about that change, and doesn't re-render. The virtual DOM is not changed.
When React re-renders the next time (for any other reason),
React checks if the color has changed in its virtual DOM, but the color in the virtual DOM has not changed, is was black and is still black,
so React does not update the color in the real DOM, but just leaves it untouched as it is right now, which is red.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论