React 个人总结和理解

React 深入解析

一、核心原理

React 基于三大核心思想构建：

1. 声明式编程：描述 UI 应该是什么样子，而不是如何一步步更新。
2. 虚拟 DOM：用 JavaScript 对象表示真实 DOM 结构，通过 Diff 算法高效更新。
3. 组件化：将 UI 拆分为独立、可复用的组件单元。

---

二、实现机制

1. Fiber 架构

Fiber 是 React 16 引入的全新协调引擎，目标是实现可中断的异步渲染和任务优先级调度。

核心设计：

• 链表结构：每个 Fiber 节点都是一个链表节点，包含 child、sibling、return 指针。
• 双缓存机制：
  • Current Tree：当前页面正在渲染的 Fiber 树。
  • WorkInProgress Tree：内存中正在构建的新 Fiber 树。
• 更新流程：
  1. 渲染阶段（可中断）：
     • 遍历 Fiber 树，标记需要更新的节点。
     • 采用时间切片机制，每处理一个时间片后检查是否有更高优先级任务。
  2. 提交阶段（不可中断）：
     • 将所有标记的变更一次性更新到真实 DOM。

Hooks 在 Fiber 中的存储：

• 所有 Hooks 都存储在对应 Fiber 节点的 memoizedState 属性中。
• Hooks 以链表形式连接，调用顺序决定了在链表中的位置。
• 自定义 Hooks 会被拆分为基本 Hooks，按顺序添加到链表。

重要结论：

1. Hooks 顺序必须稳定：链表结构依赖调用顺序，顺序变化会导致状态错乱。
2. 性能优化本质：
   • React.memo：防止组件不必要的重新渲染。
   • useMemo/useCallback：保持对象/函数引用稳定，避免触发子组件重新渲染。

2. 事件系统

• 合成事件：React 封装了浏览器原生事件，提供跨浏览器一致的事件接口。
• 事件委托：所有事件都被委托到 React 树的根节点，通过事件冒泡捕获处理。
• 与 Vue 对比：
  • Vue 直接使用原生事件，通过修饰符（如 .stop、.prevent）增强。
  • Vue 的组件通信使用独立的自定义事件系统（$emit）。

---

三、Hooks 使用详解

1. useState

• 状态缓存：状态存储在 Fiber 节点中。
• 批处理更新：多个 setState 调用会被合并为一次更新。
• 函数式更新：当新状态依赖旧状态时，应使用函数形式：setCount(prev => prev + 1)。
• 浅比较：仅比较对象引用，不进行深度比较。

2. useEffect

• 执行时机：在浏览器完成绘制后异步执行。
• 依赖数组：
  • 无依赖：每次渲染后执行。
  • 空数组 []：仅首次渲染后执行。
  • 包含依赖：依赖项变化时执行。
• 清理函数：useEffect 可返回一个清理函数，在组件卸载或依赖变化前执行。

3. useContext

• 创建上下文：const UserContext = React.createContext(defaultValue)
• 提供上下文：<UserContext.Provider value={value}>
• 消费上下文：const value = useContext(UserContext)
• 适用场景：主题、国际化等全局数据共享。

4. 其他核心 Hooks

• useReducer：适用于复杂状态逻辑，类似于 Redux 的 reducer 模式。
• useMemo：缓存计算结果，避免重复计算。
• useCallback：缓存函数引用，避免子组件不必要渲染。

5. 自定义 Hooks

• 命名规范：以 use 开头。
• 独立状态：每个自定义 Hook 拥有独立的状态。
• 单一职责：每个 Hook 应专注于一个特定功能。

---

四、高级特性

1. 代码分割

• React.lazy()：实现组件动态导入（按需加载）。
• <Suspense>：指定加载中的降级 UI（如 loading 状态）。
• Vue 对应：defineAsyncComponent + <Suspense>。

2. DOM 操作

• Refs：
  • useRef：创建可变引用，用于访问 DOM 节点或存储任意可变值。
  • 回调 Ref：获取动态 DOM 节点。
• Portals：
  • ReactDOM.createPortal：将子节点渲染到父组件 DOM 层次外的指定节点。
• Vue 对应：ref 属性 + <Teleport>。

3. 并发特性（React 18+）

• useTransition：
  • 标记非紧急更新（如页面跳转、筛选）。
  • 可中断，不阻塞用户交互。
• useDeferredValue：
  • 延迟更新派生值（如搜索结果）。
  • 为耗时计算添加缓冲，保持 UI 响应。
• Vue 对应：
  • 响应式系统自动优化，无需手动标记。
  • computed + watchEffect 实现防抖优化。
• 选择原则：
  • 用户操作直接触发 → useTransition
  • 输入值派生计算 → useDeferredValue

4. 状态管理

• Context API：内置的组件树全局状态共享方案。
• Vue 对应：provide/inject。
• 适用场景：中小型应用或无需复杂状态管理的场景。

---

五、总结

React 的核心优势在于其声明式、组件化的开发模式和高效的虚拟 DOM 协调机制。Fiber 架构的引入使 React 能够处理更复杂的 UI 场景，并提供了并发渲染能力。Hooks 的出现让函数组件成为主流，代码组织更加灵活。