React 从 v16 开始逐步引入异步可中断的渲染架构。
React 渲染过程可以分为三个阶段 Scheduling、Reconciliation、Commit。
Scheduling 阶段执行任务调度，Reconciliation 阶段更新虚拟 DOM，本文主要讲述这两个阶段。(Commit 阶段更新 UI。e.g. 在浏览器环境中更新 DOM、在移动端环境中更新 Native 视图。)
本文基于目前最新的 React v18.2.0 代码。
理解 JSX
JSX 简介
JSX 的介绍参考 React 官方文档 JSX 简介。
JSX 编译后会转为名为 React.createElement 的函数调用。
React.createElement 函数签名
1 | function createElement(type: any, props?: any, ...children: ReactNode[]) |
createElement 函数接收三个参数。
第一个参数为节点类型 type。比如，若在 JSX 中是 div，则 type 为 “div” 字符串；若在 JSX 中是自定义函数组件 CustomComponent，则 type 为 CustomComponent 函数。
第二个参数为节点属性 props。比如，若 JSX 中声明 <div className="wrap">，则 props 为 { className: "wrap" }；若 JSX 中声明 <div>，则 props 为 null。
第三个参数为不定参数，每个参数值对应一个当前节点的子节点。
监听文件变化
背景
之前做了一个工具 CubeTrans，可以将 “Vue” 代码转译成了 React 代码，具体参考这篇文章 将 "Vue" 转译为 React。为了让 CubeTrans 有用，又做了 CubeTransDev 工具，核心功能是实时监听文件变化。当监听到代码或 mock data 变化时，能够自动编译并实时预览。
将 "Vue" 转译为 React
本文记录了如何将 Vue 语言转译为 React 语言。主要目的是，当你面对此类源代码分析工作时，能够找到一些结构化处理的思路。
背景
标题中的 Vue 加上了引号，因为要转译的 Vue 代码不是包含了所有 Vue 语言特性的代码，而是 Vue 的一个子集。Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述 这篇文章介绍了支付宝中使用的动态化框架，“对于Cube卡片，支持基于精简vue的card-dsl。”
Cube 卡片是一种客户端技术，进行 Cube 卡片研发需要进行繁琐的开发环境配置，将 Vue 转译为 React 能够在浏览器中实时预览，提升研发效率。将精简的 Vue 语法转译为标准的 Vue 语法也能实现浏览器预览，但公司里的 H5 项目均采用 React 开发，转译为 React 能够在 H5 项目中复用已有的 Cube 卡片。
暂将这个工具命名为 CubeTrans。