`js
React.createElement("div",
{
style: "color: red"
},
...children
);
`

这里 HTML tag 位置的 div 对应第一个参数 "div"，div 的属性对应第二个参数，而其 children 对应 React.createElement 的变长参数部分。

这种情况下，是不能实现用户自定义的组件的：createElement 的第一个参数是字符串常量而不是函数。

而当 HTML tag 位置的 token 是一个已经定义的首字母大写的变量：

`jsx
function Comp({ text, intro }: { text: string, intro: string }) {
return (



`

情况就不一样， 会被转写为

`js
React.createElement(Comp,
{
text: "React",
intro: "is baaaaad",
},
...children
);
`

因此，为了实现 Atom 和 Component 的 JSX 语法，我们需要把一个叫 React 的变量暴露出来：

`js
// export function createElement...

const React = {
createElement,
...
}

export default React;
`

然后用户需要这样引入（注意 React.createElement 此时必须是已经定义的函数，这里没有魔法）：

`jsx
import React from 'light-react';

function Comp({ text, intro }: { text: string, intro: string }) {
return (


React.render(
,
document.getElementById("root"),
);
`

这样我们就可以在 DOM 中 id 为 "root" 的节点，渲染 React 所管辖的 UI 了。

然后我们的 createElement 必须区别对待 Atom 和 ComponentElement：

`jsx
export function createElement

(
tag: string | LightComponent

,
props?: P,
...children: LightNode[]
) {
if (typeof tag === "string") {
return createAtom(tag, props, ...children);
} else {
return createComponentElement

(tag, props ?? {} as P, ...children);
}
}
`

在 createComponentElement 中，我们生成对应的 ComponentElement：

`jsx
export const createComponentElement =

(
component: LightComponent

,
props: P,
...children: LightNode[]
): LightComponentElement

=> {
return {
tag: '',
type: 'LightComponentElement',
component,
props,
children,
shallowRender() {
this.resultVDOM = this.component(this.props);
}
};
}
`

这里的几个域含义如下：

+ type 用于标示其类型，方便后续的区别处理。
+ component 是渲染的函数，由用户直接给出。
+ props 是组件输入的 Props。
+ children: JSX 传入的 children
+ shallowRender: 运行一次渲染函数，得到对应 props 产生的 LightNode。注意这里不会递归运行其返回的 Component。
+ resultVDOM: 渲染的结果。

LightNode 是对所有 VDOM 中的组件类别的全集：

`jsx
type LightNode = LightComponentElement | LightText | LightAtom | string | undefined;
`

引入了 Component 后，diff 算法和 createDOM 函数会有所不同。在这里，diff 是比较两个 VDOM 树不同的算法。当自动或手动重新渲染时，diff 将执行并给出当前 VDOM 和上次 VDOM 的差异，转化为一系列 Patch 操作，交给 patch 对 DOM 进行实际更新。patch 会调用 createDOM ，createDOM 最终调用 document.createElement 等浏览器 API 来改动 DOM。

首先是 diff 算法：

我们需要特别处理当两个 LightNode 的类型均为 LightComponentElement 的情形：

`jsx
// ...
} else if (isLightComponentElement(prevVDOM) && isLightComponentElement(nextVDOM)) {
if (prevVDOM.component !== nextVDOM.component) {
patches.push({ type: 'update', prevVDOM, nextVDOM, parentDOM });
} else if (!areShallowEqual(prevVDOM.props, nextVDOM.props)) {
nextVDOM.shallowRender();
patches.push(...diff(prevVDOM.resultVDOM, nextVDOM.resultVDOM, prevVDOM._DOM!));
} // Else the VDOM will not be updated
}
`
这里要做的事情其实也非常简单：

首先我们比较两者的渲染函数 component 是不是同一个，如果不是的话，update 操作会删去原来的 ComponentElement 对应的 DOM 节点（当然，这里没有实现生命周期相关的 hooks），否则比较他们的 props 是不是相同的（这里我们行为稍微和 React 不同，React只有用 React.memo 修饰的 Component 才会比较。）。

如果 props 不同 （React 则是默认不设该条件），那么 nextVDOM 将会进行一次 shallowRender。shallowRender 将会令 nextVDOM.resultVDOM 被赋值为 nextVDOM 新渲染得到的 VDOM。然后，我们递归地比较这样的渲染对树的结构造成的影响。

createDOM 函数的变动：

`jsx
} else if (isLightComponentElement(vdom)) {
vdom.shallowRender();
dom = createDOM(vdom.resultVDOM);
vdom._DOM = dom;
}
`

createDOM 用于从 VDOM 节点创建新的 DOM 节点。同样，这里需要特判 vdom 是 LightComponentElement 的情况。首先，我们需要进行一次 shallowRender，得到渲染出来的 LightNode，然后递归创建这个 DOM 节点（当然，如果再次遇到了新渲染的 LightComponentElement，又会做同样的事情，从而最后所有的 LightNode` 都产生了对应的 DOM 节点。

结束

本文介绍了如何写一个模仿 React 的 UI 渲染库，主要是把 Functional Component 的实现简化出来供读者参考。当然本文并没有实现 Hooks 等特性，如果今后有空笔者十分有尝试的兴趣。