标准答案
- 声明式 UI 关注“当前状态下 UI 应该是什么”，开发者主要维护 state、props 和渲染结果之间的关系。
- 传统 DOM 操作关注“怎么修改页面”，例如手动 querySelector、修改 class、innerText、style 或绑定事件。
- React 会根据组件返回的 JSX 和状态变化重新计算 UI，再通过协调过程把必要变更应用到真实 DOM。
- 声明式写法更容易让 UI 和数据保持一致，尤其适合表单、列表、条件渲染和复杂交互状态。
- 它不是完全不用 DOM，而是把大多数 DOM 更新细节交给框架管理；需要聚焦、测量尺寸、接入第三方库时仍然可能用 ref 访问 DOM。
题目解析
这道题可以从心智模型回答：传统方式是命令浏览器一步步改节点，React 是让组件根据状态返回 UI 描述。
声明式 UI 的优势在状态复杂时更明显。页面上有 loading、error、empty、selected、editing 等状态时，用状态驱动渲染比散落 DOM 操作更可维护。
React 仍然允许直接操作 DOM，但应该用于少数逃生口场景，而不是绕过 React 去修改由 React 管理的节点。
代码示例
下面的例子展示同一个按钮状态，用 React 时更关注状态和渲染结果。
TSX
function SubmitButton() {
const [loading, setLoading] = useState(false)
async function submit() {
setLoading(true)
await saveForm()
setLoading(false)
}
return (
<button disabled={loading} onClick={submit}>
{loading ? '提交中' : '提交'}
</button>
)
}常见误区
- 把声明式 UI 理解成“React 不操作 DOM”。React 仍然会更新 DOM，只是开发者通常不直接写 DOM 更新步骤。
- 在 React 管理的节点上混用大量手写 DOM 修改，导致真实 DOM 和组件状态不一致。
- 只说“React 有虚拟 DOM”，没有说清楚状态驱动视图这个核心差异。