Declarative UI 声明式界面

最后更新：2026-10-28

声明式 UI 指你只「描述界面在某个状态下长什么样」，不手写一步步的 DOM 操作；状态一变，React 自动把界面更新到位。相比命令式（jQuery 式查改 DOM），代码更可预测、更好维护。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

// 命令式（旧思路）：一步步手动改 DOM
document.getElementById('tip').textContent = '已提交'

// 声明式（React 思路）：描述状态 → 界面的映射
{submitted ? <p>已提交</p> : <p>待提交</p>}

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

屏幕显示一个大号灯泡状态文案（灯亮着/灯关着）和一个按钮；点击按钮两者立即切换，全程没有任何手动 DOM 操作。

💡 提示 写组件前先想清楚「有哪些状态、每种状态长什么样」，声明式代码自然就清晰了。

ℹ️ 说明 从 jQuery 迁移过来的开发者，最常见的转变就是：把「操作过程」改成「声明结果」。

⚠️ 注意 避免一半声明一半命令：声明式渲染的同时又用 ref 直接改文本，会造成两套真相打架。

更多案例整理中，敬请期待。

Q 声明式和命令式 UI 的区别是什么？

A 命令式描述「怎么做」（一步步操作 DOM），声明式描述「是什么」（状态对应什么界面）。React 只要求你改状态，更新过程交给框架。

Q 为什么 React 选择声明式？

A 界面代码与状态强绑定，可预测、易测试、易协作；复杂的 DOM 同步逻辑被框架统一处理，出错面大幅缩小。

Q 声明式 UI 下怎么做动画？

A 用状态驱动 CSS 类名切换，或配合 framer-motion 这类声明式动画库，动画同样由状态描述而非手动补间。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。