认识
一、认识
二、特点
三、Vue vs React
Vue 是一个 编译时 + 运行时 的前端框架, Vue 通过编译 Template 得到虚拟 DOM 渲染函数, 可以在编译的时候进行非常好的性能优化, 比如 动态标记、靶向更新、静态提升（静态节点、动态节点中的静态属性）、预字符串化、内联函数缓存等; Vue 采用响应式依赖追踪机制, 基于 Proxy 来监听数据变化, Vue 内部可以精确的知道数据发生变化的组件, 从而自动更新渲染。Vue 内部将 Template 或者 JSX 编译之后, 生成 VNode 虚拟 DOM, 在整个更新渲染中只会操作 VNode 数据。由于 Vue 只有 VNode, 在进行 Diff 算法时, 可以使用双端对比算法, 高效、快速的完成最小差异比对。 Vue3.0 则是把整个静态节点进行提升处理, Diff 的时候是不过进入循环的。而且, 针对动态节点的, 通过建立块虚拟节点数组, 实现了靶向更新。
React 是纯运行时前端框架, 在运行前, 已经将 JSX 全部转换为 ReactElement 虚拟 DOM, 在运行中没有机会进行编译优化。React 需要通过 this.setState 或者 useState dispatch 手动触发更新, 由开发者决定是否触发更新。React 触发更新工作流为: 从当前 Fiber 节点开始, 冒泡标记更新, 从当前 Fiber 向上遍历，更新每个祖先节点的 childLanes 属性，表明该分支中存在待调和的更新任务。在冒泡更新标记的过程中，最终会找到对应的根节点（通常为 FiberRoot），这个根节点是整个更新流程的入口, 并返回 FiberRoot。也就是说, React 每一次更新都是从 根节点 开始, 为调度提供了统一的入口, 使得更新可以被分割、优先级调度、甚至中断。虽然更新调度从根开始, 但实际的重新渲染和 DOM 更新只发生在受影响的部分, Fiber 算法通过 diff 和优化手段避免了全量重渲染。
另外, React 在运行前, 将 JSX 全部转换为 ReactElement 虚拟 DOM, 随后在 Render BeginWork 递阶段 会生成 Fiber 树, 具有两种数据结构。由于 React 具有两种结构, 在进行 Diff 对比时, 通过对比 ReactElement 数组 与 Fiber 单链表, 只能从左到右依次比对, 无法实现双端对比。而且, 由于 React 是纯运行时前端框架, 在运行前, 已经将 JSX 全部转换为 ReactElement 虚拟 DOM, 在运行中没有机会进行编译优化, 所以无法进行静态节点分析的，因此 React 在对静态节点处理这一块是要逊色的。