React中Checkbox默认checked为false时调试元素无法查看该属性的疑问

当HTML Input标签的checked属性默认值为false时，无法在调试元素面板中查看；而默认值设为true时，该属性会始终显示。

示例代码 #

import {useState} from "react";

function App() {
    const [checked, setChecked] = useState(false)
  return (
      <div style={{width: "100vw", height: "100vh"}}>
          <input type="checkbox" checked={!!checked} onClick={() => setChecked(!checked)} />
      </div>
  );
}

现象说明 #

• 默认将checked值设为false时：点击复选框切换状态后，调试控制台中永远看不到checked属性（对应截图：调试面板的input标签上无checked属性）
• 默认将checked值设为true时：无论是否点击切换，调试控制台中始终能看到checked属性（对应截图：调试面板的input标签上一直显示checked属性）

解答 #

这是完全正确的行为，原因在于HTML的布尔属性规则：布尔属性只要存在就代表其值为true，不存在则代表值为false。React在渲染DOM时严格遵循这个规范：

• 当checked状态为false时，不会在DOM元素上渲染出checked属性；
• 当checked状态为true时，才会将checked属性添加到DOM元素上。

所以你观察到的调试面板显示差异是符合规范的正常表现。

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