React如何仅更新DOM中需变更的部分？技术原理问询

首先明确核心结论：React本质就是用原生JavaScript API操作DOM的，它没有浏览器专属特权，只是帮你把「精准更新DOM」这件事自动化了。下面拆解你的疑问：

1. 先纠正一个误区：常规JS网页并非必须全量渲染DOM #

所谓“常规网页会重新渲染整个DOM”是误解——原生JS本身就支持精准更新部分DOM。比如：

// 原生JS只更新某个元素的文本
const title = document.getElementById('page-title');
title.textContent = '新标题';

这种操作只会修改指定元素的内容，整个页面的其他DOM节点完全不会被触动。所谓“全量渲染”只是早期或不规范的写法（比如直接替换document.body.innerHTML、刷新页面），并非原生JS的限制。

2. React的Virtual DOM是帮你算“该更哪里”，而非有特殊能力 #

当React组件状态变化时，它会做三件事：

• 生成新的Virtual DOM树（本质是描述DOM结构的JS对象）
• 和旧的Virtual DOM树做对比（diff算法），找出最小变更集合（比如某个元素的文本变了、某个属性改了）
• 把这些变更转换成对应的原生DOM操作（比如调用textContent修改文本、setAttribute改属性、appendChild加元素等）

React并没有让浏览器做什么特殊操作，它只是替你完成了“追踪状态变化→找到需要更新的DOM节点→调用原生API修改”这个流程，不用你手动写这些繁琐的逻辑。

3. React转译后就是普通JS，浏览器只认DOM API #

你写的JSX会被转译成普通的JS代码，比如：

// 你的JSX代码
<div className="greeting">Hello {name}</div>

转译后大概是：

React.createElement('div', {className: 'greeting'}, `Hello ${name}`);

当name变化时，React内部会判断出这个div的文本节点需要更新，然后直接调用原生的textContent去修改对应的DOM节点，而不是删除整个div再重建——这和你自己写原生JS做的事情完全一样，只是React帮你自动化了判断过程。

4. 原生JS当然能做到部分更新DOM，React就是这么做的 #

举个原生JS实现类似React效果的例子：

// 模拟React的状态驱动DOM更新
let state = { count: 0 };
const countEl = document.getElementById('count');

// 更新状态的函数
function setState(newState) {
  state = { ...state, ...newState };
  // 手动判断并更新DOM
  countEl.textContent = state.count;
}

// 点击按钮更新状态
document.getElementById('increment').addEventListener('click', () => {
  setState({ count: state.count + 1 });
});

这和React的核心逻辑一致，只是React把“状态变化→更新DOM”的映射逻辑封装得更完善，能处理复杂的组件树、嵌套结构，不用你手动追踪每个DOM节点的更新逻辑。

内容的提问来源于stack exchange，提问作者gib65