每天一个前端小知识 Day 5 - React 核心机制与 Hooks 原理

React 核心机制与 Hooks 原理

---

1. React 的设计思想

React 是一个用于构建用户界面的声明式、组件化框架。其核心理念包括：

• 声明式视图：状态驱动 UI；
• 组件化开发：将 UI 拆分为独立、可复用组件；
• 单向数据流：数据由父组件流向子组件；
• 虚拟 DOM：提升性能，避免直接操作 DOM。

---

2. 函数组件 vs 类组件（对比理解）

特性	类组件	函数组件（Hook）
语法复杂度	高	简洁
状态管理	this.state / this.setState	useState
生命周期	componentDidMount 等	useEffect
this 绑定	必须显式绑定	无需绑定
性能	相对低	更轻量、高效
面试倾向	理解生命周期更考察深度	精通 Hooks 是新趋势

---

3. Hooks 核心概念讲解

✅ useState：添加状态

const [count, setCount] = useState(0);

注意：状态更新是异步的，不会立即反映在当前渲染中。

✅ useEffect：副作用处理（替代生命周期）

useEffect(() => {
  // 模拟 componentDidMount + componentDidUpdate
  document.title = `Count: ${count}`;
}, [count]);

依赖项数组决定了 effect 的执行时机。

用法	等价类组件生命周期
无依赖项 []	componentDidMount
有依赖项 [count]	componentDidUpdate（某依赖变化）
返回函数（清理副作用）	componentWillUnmount

✅ useRef：获取 DOM 或存储变量

const inputRef = useRef(null);

• 获取 DOM 元素；
• 储存跨渲染周期的变量（不触发重新渲染）。

✅ useContext：共享状态

const theme = useContext(ThemeContext);

用来在组件树中传递全局状态，如主题、语言等。

✅ useMemo & useCallback：性能优化

const memoValue = useMemo(() => expensiveFn(data), [data]);
const memoFn = useCallback(() => doSomething(), []);

防止组件重复计算 / 创建新函数导致子组件重复渲染。

---

4. 虚拟 DOM 与 Diff 算法（面试高频）

✅ 虚拟 DOM 是什么？

虚拟 DOM（VDOM）是 JS 对象的 DOM 描述。当状态改变时：

1. 创建新的 VDOM；
2. 与旧 VDOM 做 diff；
3. 找出最小更新路径，批量操作真实 DOM。

✅ React 的 Diff 策略（O(n)）

• 只比较同一层级节点；
• 对于列表更新，建议加唯一 key；
• 不使用 index 作为 key（可能导致状态错乱）；

---

5. 面试高频问题讲解

📌 Q1：React 为什么使用虚拟 DOM？

答：直接操作真实 DOM 成本高，频繁更新性能差。虚拟 DOM 用 JS 对象描述结构，批量 diff 后操作最小量的真实 DOM，提高性能。

---

📌 Q2：useEffect 和 useLayoutEffect 有何区别？

特性	useEffect	useLayoutEffect
触发时机	页面渲染后异步执行	DOM 变更后同步执行（阻塞绘制）
使用场景	网络请求、事件监听	精确控制 DOM 样式、滚动位置

---

📌 Q3：为什么不能在条件语句中使用 Hooks？

if (x > 0) {
  useState(); // ❌ 不允许
}

答：Hook 的调用顺序必须在每次渲染中保持一致。条件语句会破坏这一规则，导致状态错乱。

---

📌 Q4：如何避免父组件每次渲染都触发子组件更新？

• 使用 React.memo 包裹子组件；
• 使用 useCallback 缓存传入的函数；
• 使用 useMemo 缓存复杂计算结果。

---

📌 Q5：key 在列表中起什么作用？

答：帮助 React 精确判断节点是否变更。正确使用 key 可避免组件状态错乱。推荐使用数据库唯一 ID，避免用索引。

---

6. 实战建议

• 合理拆分组件、提升复用性；
• 避免频繁渲染和大组件嵌套；
• Hooks 组合可以抽象成自定义 Hook；
• 开发中配合 TypeScript 使用，更安全更清晰；
• 推荐使用 eslint-plugin-react-hooks 做规范约束；

---

✅ 总结

React 不再仅仅是一个“前端框架”，它已成为现代前端开发的基石。理解 Hooks 原理、虚拟 DOM、组件化思想等，不仅能提升项目开发效率，也能在面试中脱颖而出。