Day 16：原理综合与面试题

Day 16：原理综合与面试题

从输入 URL 到页面展示

1. URL 解析
2. DNS 解析 → IP
3. TCP 连接
4. 发送 HTTP 请求
5. 服务器处理
6. 返回 HTML
7. 浏览器解析 HTML
8. 构建 DOM 树
9. 构建 CSSOM 树
10. 生成渲染树
11. 布局（Layout）
12. 绘制（Paint）
13. 合成（Composite）

---

React vs Vue

方面	React	Vue
核心思想	函数式、不可变	响应式、可变
模板	JSX	SFC
状态管理	Redux/Zustand	Vuex/Pinia
更新方式	虚拟 DOM	响应式 + 虚拟 DOM

---

如何设计好的 React 组件

// 1. 单一职责
function UserAvatar() { /* 只做头像 */ }

// 2. Props 精简
function Button({ onClick, variant = 'primary', children }) {}

// 3. 内部状态最小化
function Form() {
  const [data, setData] = useState({});
  // 其他状态让父组件管
}

// 4. 用组合代替继承
<Layout header={<Header />} content={<Content />} />

---

性能优化 Checklist

• 大列表用 react-window
• 加唯一 key（不用 index）
• 复杂计算用 useMemo
• 函数用 useCallback
• 重渲染组件用 memo
• 代码分割用 lazy
• 图片懒加载

---

面试高频问题汇总

分类	问题
基础	虚拟 DOM 是什么？
原理	setState 后发生了什么？
Fiber	Fiber 解决了什么问题？
Diff	React Diff 原则？
Hook	useEffect vs useLayoutEffect？
优化	如何减少重渲染？