UD5工具箱
术语表
以下是与组件预览沙盒相关的专业术语解释，帮助您更好地理解工具中涉及的概念和技术细节。
JSX（JavaScript XML）
JSX 是一种 JavaScript 的语法扩展，允许开发者在 JavaScript 代码中直接编写类似 HTML 的标记结构。JSX 不是一种独立的编程语言，而是会被编译器（如 Babel）转换为标准的 JavaScript 函数调用。在 React 框架中，JSX 标签会被编译为 React.createElement 调用，最终生成虚拟 DOM 节点。JSX 的优势在于它将组件的结构和逻辑紧密地组织在一起，使组件代码更加直观和易读。例如 JSX 代码会被编译为 React.createElement 函数调用，其中第一个参数是标签名，第二个参数是属性对象，第三个参数是子元素内容。
Babel Standalone
Babel Standalone 是 Babel 编译器的浏览器端运行版本，无需安装 Node.js 环境即可在浏览器中执行代码编译。它包含了 Babel 的核心编译功能和常用的语法转换插件，能够将 JSX、TypeScript 类型注解、可选链操作符等现代 JavaScript 语法编译为浏览器兼容的 ES5 或 ES2015 代码。在本工具中，Babel Standalone 负责将 React 的 JSX 语法和 Vue3 的组件代码实时编译为可执行的 JavaScript 代码。Babel Standalone 通过加载预配置的 preset 和 plugin 来支持不同语法特性的编译。
React
React 是由 Facebook（现 Meta）开发和维护的一个用于构建用户界面的 JavaScript 库。React 的核心思想是组件化开发，将复杂的 UI 拆分为独立的、可复用的组件。React 使用虚拟 DOM（Virtual DOM）机制来高效地更新真实 DOM，通过 diff 算法计算出最小化的 DOM 操作。React 支持 JSX 语法编写组件，提供了 Hooks（如 useState、useEffect、useRef 等）机制来处理状态和副作用。React 18 版本引入了并发渲染（Concurrent Rendering）和自动批处理（Automatic Batching）等特性，进一步提升了渲染性能。
Vue3
Vue3 是 Vue.js 框架的最新主要版本，由尤雨溪（Evan You）创建并维护。Vue3 在 Vue2 的基础上进行了全面的重构和优化，引入了 Composition API 作为组织组件逻辑的新方式，使用 Proxy 替代了 Object.defineProperty 实现响应式系统，性能显著提升。Vue3 的核心特性包括：ref 和 reactive 响应式数据、computed 计算属性、watch 侦听器、生命周期钩子函数以及模板语法和渲染函数两种模板编写方式。Vue3 也支持 JSX 语法，但更多开发者倾向于使用模板语法来编写组件。
Composition API
Composition API 是 Vue3 引入的一种全新的组件逻辑组织方式，通过 setup 函数（或 script setup 语法糖）将组件的状态定义、方法声明和生命周期钩子集中在一起。与 Options API（将代码按 data、methods、computed 等选项分类组织）不同，Composition API 按照功能逻辑来组织代码，使得相关的状态和方法可以放在一起，逻辑复用更加方便。Composition API 的核心函数包括：ref（创建响应式引用）、reactive（创建响应式对象）、computed（创建计算属性）、watch/watchEffect（创建侦听器）、onMounted/onUnmounted（生命周期钩子）等。
Hooks（React Hooks）
React Hooks 是 React 16.8 版本引入的一组函数，允许在函数组件中使用状态和其他 React 特性，而无需编写类组件。常用的 Hooks 包括：useState（管理组件状态）、useEffect（处理副作用和生命周期）、useRef（创建可变引用）、useCallback（缓存函数引用避免不必要的重渲染）、useMemo（缓存计算结果优化性能）等。Hooks 的出现使得函数组件成为 React 组件开发的主流方式，代码更加简洁和易于理解。在本工具的 React 模式中，预设示例展示了 useState 和 useEffect 等常用 Hooks 的使用方式。
沙盒（Sandbox）
沙盒是一种安全隔离机制，用于限制代码的执行环境和权限范围。在 Web 开发工具中，沙盒通常通过 iframe 沙盒属性（sandbox attribute）来实现，允许控制 iframe 中的代码可以执行哪些操作（如是否允许执行脚本、是否允许提交表单、是否允许访问父窗口等）。本工具使用 iframe 沙盒来隔离组件代码的执行环境，确保组件代码中的变量定义、样式规则和事件处理不会影响到工具主界面的正常运行。沙盒隔离是构建在线代码编辑器和开发者工具的重要安全实践。
虚拟 DOM（Virtual DOM）
虚拟 DOM 是一种编程概念，指的是用 JavaScript 对象树来模拟真实的 DOM 树结构。当组件状态发生变化时，框架会先在虚拟 DOM 上进行变更计算，通过 diff 算法比较新旧两棵虚拟 DOM 树的差异，然后只将实际变化的部分应用到真实 DOM 上，避免了不必要的整页重渲染。React 和 Vue3 都使用了虚拟 DOM 机制来提升渲染性能。虚拟 DOM 的优势在于它提供了声明式的编程模型——开发者只需要描述 UI 在不同状态下应该是什么样子，框架会自动计算出最优的 DOM 更新策略。
响应式数据（Reactivity）
响应式数据是一种数据绑定机制，当数据发生变化时，使用该数据的视图会自动更新。在 Vue3 中，响应式系统基于 Proxy 实现，通过 ref 和 reactive 函数创建响应式数据。当响应式数据被修改时，Vue3 的依赖追踪系统会自动通知所有依赖该数据的组件进行重新渲染。在 React 中，响应式机制通过 useState 等 Hooks 实现，当调用 setState 时，React 会调度组件的重新渲染。响应式数据的核心价值在于它让开发者无需手动操作 DOM 来更新视图，只需关注数据的变化即可。