从零开始的React再造之旅

实现还包括了很多额外属性，简单起见本文未涉及，参看官方定义。

这个对象描述了 React 创建一个节点（node）所需要的信息，type 就是 DOM 节点的名字，比如这里是 h1，也可以是函数组件，后面会讲到。props 包含所有元素的属性（比如 title）和特殊属性 children，children 可以包含其他元素，从根到叶也就能构成一颗完整的树，也就是描述了整个 UI 界面。

为了避免含义不清，“元素”特指 “React elements”，“节点”特指 “DOM elements”。

ReactDOM.render

下面替换掉 ReactDOM.render 调用，这里 React 会把元素更新



 

元素对象，首先用 element.type 创建节点，再把非 children 属性（这里是 title）赋值给节点。

然后创建 children 节点，由于 children 是字符串，故创建 textNode 节点，并把字符串赋值给 nodeValue，这里之所以用 createTextNode 而不是 innerText，是为了方便之后统一处理。

再把 children 节点 text 插到元素节点的子节点上，最后把元素节点插到根结点即完成了这次 React 的替换。

像上面代码 element 这样 JSX 转成的描述 UI 界面的对象就是所谓的 虚拟 DOM，相对的 node 即 真实 DOM。render/渲染 过程就是把虚拟 DOM 转换成真实 DOM 的过程。

I: 实现 createElement 函数

第一步首先实现 createElement 函数，把 JSX 转换成 JS。以下面这个新

（编辑：怀化站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!