源码基础

包含：Fiber 节点结构（tag/stateNode）、调和（reconciliation）过程（双缓冲）、优先级调度（Lane）

要求： 看 React 源码注释版，画 Fiber 节点结构图

虚拟 DOM 和 Diff 算法

• 虚拟 DOM
  • 为什么需要虚拟 DOM
  • 结构组成
• React Diff 算法核心
  • Tree Diff
  • Component Diff
  • Element Diff
• Diff 算法的优化
  • key 的作用
  • 同层比较

技能：

• 手写一个简单的 “虚拟 DOM 转换为真实 DOM” 函数
• 分析 “列表中删除中间元素” 时，有无 key 对 Diff 性能的影响

问题

• 虚拟 DOM 比真实 DOM 快吗？为什么？
• React Diff 算法和 Vue Diff 算法的核心区别是什么？

生命周期与 Fiber

• 类生命周期
  • 挂载
  • 更新
  • 卸载
  • 常用钩子
• 函数组件的生命周期
• Fiber 架构原理
  • 为什么需要 Fiber
  • 增量更新
  • 优先级调度

技能：

• 用类组件和函数组件分别实现 “生命周期日志打印”
• 分析 Fiber 架构解决 “长列表渲染卡顿” 问题

问题

• React 18 中类组件的 componentWillMount 为什么被标记为不安全？
• Fiber 架构的 “优先级调度” 是如何实现的？不同任务的优先级有哪些？