React重渲染时为何不会改变Checkbox的选中状态？

我创建了一个带有onChange事件处理器的输入框和一个Checkbox，点击Checkbox将其设为选中状态后，在输入框中输入内容会触发组件重渲染（因使用了useState Hook）。但重渲染发生时，React为何没有将Checkbox显示为未选中状态，而是保留之前的选中状态？我希望了解React的这种重渲染行为。

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input type="checkbox" />
      {console.log(name)}
    </div>
  );
}

export default App;

核心原因：未受控组件的状态由DOM自身维护 #

你写的Checkbox是未受控组件——它没有通过checked属性绑定React状态，也没有设置onChange事件同步状态到React。这种情况下，Checkbox的选中状态完全由浏览器DOM节点自主管理，React不会主动干涉。

React重渲染的逻辑：只更新虚拟DOM有差异的部分 #

组件重渲染时，React会重新生成虚拟DOM，再和上一次的虚拟DOM做对比：

• 你的Checkbox在重渲染前后的虚拟DOM都是<input type="checkbox" />，没有任何属性变化，所以React不会去修改对应的真实DOM节点。
• 真实DOM里Checkbox的选中状态是用户之前操作的结果，React不会覆盖这种未被它管控的原生DOM状态。

对比：受控组件的表现 #

如果把Checkbox改成受控组件，绑定React状态：

const [checked, setChecked] = useState(false);
// ...
<input type="checkbox" checked={checked} onChange={(e) => setChecked(e.target.checked)} />

这时重渲染时，React会严格根据checked状态更新DOM的选中状态——如果checked是false，不管之前DOM是什么状态，都会被强制改成未选中。

总结 #

React只管控通过props/state绑定的DOM属性，未绑定的DOM状态（比如未受控表单元素的用户操作状态）由浏览器自行维护。重渲染时只要虚拟DOM没有变化，React就不会干扰这些原生DOM的状态。

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