React 如何只更新 DOM 中需要更新的部分？

Question

React 如何能够仅更新 DOM 中需要更新的部分（因为它们已更改），而不是重新渲染整个 DOM？

据我了解，常规 HTML/Javascript 网页通过重新渲染整个 DOM 来对 DOM 中的更改做出反应。我还了解到 React 使用虚拟 DOM 来确定哪些内容已更改、哪些内容未更改。它将虚拟 DOM 的先前状态与新状态进行比较，以确定发生了什么变化，并更新真实 DOM，以仅在已更改的节点上匹配虚拟 DOM。我还了解到，在转译时，React 代码会转换为常规 Javascript。

将这些放在一起就引出了上面的问题。如果 React 在转译后只是变成常规 Javascript，那么在运行时，它与常规 HTML/Javascript 网页的情况相同。但这据说会渲染整个 DOM 以响应 DOM 中的任何更改。那么代码如何只更新 DOM 中需要更新的部分呢？浏览器不知道（也不会关心）它曾经是 React 代码，那么为什么它处理 DOM 的方式应该与常规 HTML/Javascript 网页不同呢？普通 Javascript 有没有办法告诉它只更新部分 DOM，而不是重新渲染整个 DOM？这就是 React 应用程序在转换为纯 Javascript 后所做的事情吗？

Answer 1

当你做这样的事情时：

<div>Hello World</div>

它被转译为这样的东西：

import { jsx } from 'react/jsx-runtime';
// ...
jsx('div', { children: "Hello World" });

那个

jsx

函数返回一个小对象，大致如下所示：

{
  type: 'div',
  key: null,
  props: {
    children: "Hello World"
  }
}

children

属性可以（并且通常是）另一个元素，因此当您的组件渲染时，您正在树中构建一堆这些对象。为了弄清楚发生了什么变化，React 会将之前渲染的树与当前的树进行比较。

首先，它查看类型和密钥。如果其中任何一个发生了变化，那么这就是一个新元素。必须将其卸下并安装一个新的。如果类型和密钥匹配，接下来会检查 props。如果 props 发生了变化，那么它就知道需要更新该 props。

之后，它重复比较元素的子元素，然后是子元素的子元素，等等。现在它有了一个更改列表，它使用内置的浏览器功能（如

document.append）将这些更改（如果有）推送到 DOM 

.