1. 前端UI术语速查表项目概述

刚入行前端开发时，最让我头疼的就是各种专业术语的混淆。记得第一次听同事说"这个组件的props要加上debounce"时，我甚至分不清他是在说前端还是后端。这份术语速查表正是为了解决这个痛点而生——它不仅是新手的救生圈，更是老鸟的备忘录。

这个项目本质上是一个结构化、可检索的前端UI术语知识库，覆盖从基础概念到框架特性的完整知识体系。不同于零散的文档，它特别强调术语之间的关联性（比如"虚拟DOM"与"diff算法"的关系），并附带实际代码示例。目前版本已整合React、Vue、Angular三大框架的专有词汇，以及CSS-in-JS、设计系统等现代前端概念。

2. 核心术语分类解析

2.1 基础渲染概念

1. DOM（文档对象模型）
   浏览器将HTML解析成的树状结构，每个节点对应页面元素。现代框架很少直接操作原生DOM，但理解它是基础中的基础。例如：

   document.getElementById('app').innerHTML = 'Hello DOM'

2. Virtual DOM（虚拟DOM）
   用JavaScript对象模拟的DOM结构，框架通过对比新旧虚拟DOM（diff算法）来最小化真实DOM操作。React中的Fiber架构就是其进阶实现。

3. Shadow DOM
   Web Components的核心特性，创建隔离的DOM子树。常用于封装样式和行为独立的组件：

   <custom-element> #shadow-root <style>h1 { color: red; }</style> <h1>内部标题</h1> </custom-element>

2.2 组件通信术语

1. Props/Properties
   父组件向子组件传递数据的单向通道。Vue和React的实现略有差异：

   // React <ChildComponent title="传递的props" /> // Vue <child-component :title="dynamicProp" />

2. Emit/Events
   子组件向父组件通信的方式。注意不同框架的命名：

   // Vue this.$emit('update', newValue) // React props.onUpdate(newValue)

3. Context/Provide-Inject
   跨层级组件通信方案。React Context和Vue的provide/inject机制类似：

   // React const ThemeContext = createContext('light') <ThemeContext.Provider value="dark"> <Child /> </ThemeContext.Provider>

2.3 状态管理关键词

1. State vs Store

   • State：组件内部状态（如React的useState）
   • Store：全局状态容器（如Redux、Pinia）

2. Redux三原则

   • 单一数据源
   • 只读state
   • 纯函数reducer

3. MobX的Observable
   通过代理实现自动响应式更新：

   import { makeAutoObservable } from "mobx" class Counter { value = 0 constructor() { makeAutoObservable(this) } increment() { this.value++ } }

3. 现代UI模式术语

3.1 设计系统相关

1. Design Tokens
   存储设计变量的键值对，如颜色、间距等。现代实现方式：

   :root { --color-primary: #1890ff; --spacing-md: 8px; }

2. Atomic Design
   将UI拆分为原子（按钮）、分子（搜索框）、组织（导航栏）等层级的设计方法论。

3. Storybook Driven Development
   基于Storybook的组件驱动开发流程：

   // Button.stories.js export default { title: 'Components/Button', component: Button } export const Primary = () => <Button variant="primary" />

3.2 性能优化术语

1. Tree Shaking
   Webpack等工具移除未使用代码的技术，依赖ES Module的静态结构。

2. Code Splitting
   按需加载代码的典型实现：

   // React lazy const OtherComponent = React.lazy(() => import('./OtherComponent'))

3. Island Architecture
   现代SSR框架（如Astro）采用的模式，将交互部分作为"岛屿"嵌入静态页面。

4. 框架专属术语对照

4.1 React技术栈

1. Hooks

   • useState：带状态的变量
   • useEffect：副作用管理
   • useMemo：值记忆
   • useCallback：函数记忆

   const [count, setCount] = useState(0) useEffect(() => { document.title = `点击了${count}次` }, [count])

2. JSX
   JavaScript语法扩展，实际会被转译为React.createElement调用：

   // 编译前 <div className="app">Hello</div> // 编译后 React.createElement('div', { className: 'app' }, 'Hello')

4.2 Vue技术栈

1. Composition API
   Vue 3引入的基于函数的API，与Options API对比：

   // Options API export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } // Composition API import { ref } from 'vue' export default { setup() { const count = ref(0) const increment = () => count.value++ return { count, increment } } }

2. SFC（单文件组件）
   .vue文件的三段式结构：

   <template> <button @click="increment">{{ count }}</button> </template> <script> export default { data() { return { count: 0 } } } </script> <style scoped> button { color: red; } </style>

5. 实用速查技巧

5.1 常见混淆术语辨析

5.2 面试高频术语TOP10

1. 单向数据流
   React的核心设计哲学，数据从父组件流向子组件

2. 受控组件
   表单值由React state控制的组件：

   <input value={state} onChange={e => setState(e.target.value)} />

3. 高阶组件（HOC）
   接收组件返回新组件的函数：

   const withLogging = WrappedComponent => { return props => { console.log('Rendered:', WrappedComponent.name) return <WrappedComponent {...props} /> } }

4. Portal
   将子节点渲染到DOM其他位置的技术：

   ReactDOM.createPortal( <Modal />, document.getElementById('modal-root') )

5. Suspense
   React的异步加载处理方案：

   <Suspense fallback={<Spinner />}> <AsyncComponent /> </Suspense>

6. 术语学习路线建议

1. 分阶段学习法

   • 阶段1：掌握基础术语（DOM、组件、状态）
   • 阶段2：理解框架特性（Hooks、Composition API）
   • 阶段3：深入原理（Virtual DOM、Reconciliation）

2. 建立术语关联图
   用思维导图工具连接相关概念，例如：

   Virtual DOM → diff算法 → key的作用 → 列表渲染优化

3. 实践验证法
   对每个新术语立即写demo验证：

   // 理解useEffect依赖数组 useEffect(() => { console.log('依赖变化时执行') }, [dep1, dep2])

我在团队内部推行术语卡牌游戏：将术语写在卡片上，随机抽取并解释其含义和应用场景。这种互动方式能让记忆效率提升3倍以上。