本文简单聊聊React的渲染流程

在前面介绍vue的系列文章中，我们通过手写vue类的方式，将vue的渲染流程基本介绍了，其框架底层的逻辑如下：

  • 初次加载时， 数据的响应式处理和模版编译，完成初始化页面的显示。所谓数据的响应式就是让我们能够知道，什么地方用到了数据，然后在数据变化时，通知那些用到该数据的地方重新编译。而模版编译则是将模版代码转换成html代码，让页面能够显示
  • 状态数据变化时， 以更新数据后的新虚拟dom和旧的虚拟dom为输入，经过diff和patch，找出差异， 更新差异，最后重新渲染

一. 那么在react中， 这个过程又是如何的呢？
实际上无论什么前端框架，其渲染的逻辑都是一致的，只是实现的方式不同，react亦是如此。

  • 初次加载时，JSX代码解析 –> render生成虚拟dom –> 挂载显示页面
  • 状态数据变化时，修改状态setstate –> render生成新的虚拟dom –> update(旧Vnode 新Vnode) –> diff + patch –> 挂载显示页面

虽然整体逻辑如此，但是这里还需要做点扩展。react18引入了Concurrent Mode.

在 React 18 之前，React 的渲染是「同步且不可中断」的：一旦开始渲染，会占用主线程直到完成，期间若有用户输入、点击等高频交互，会出现响应延迟（如输入文字时光标滞后）。
Concurrent Mode的核心是让 React 能够「中断、暂停、恢复或放弃」渲染过程，优先处理高优先级任务（如用户输入、点击事件），避免低优先级任务（如列表渲染、数据加载）阻塞主线程，导致页面卡顿。具体实现参考requestIdleCallback