React 源码解析之 HostComponent 的更新（下）

前言

在上篇《React 源码解析之 HostComponent 的更新（上）》中，我们讲到了多次渲染阶段的更新，本篇我们讲第一次渲染阶段的更新。

HostComponent（第一次渲染）

作用：

• 创建 DOM
• 更新 DOM 属性
• 更新子组件

创建 DOM

在第一次渲染阶段，HostComponent 会根据虚拟 DOM 节点的类型创建相应的 DOM 节点。对于普通 HTML 元素，HostComponent 会调用 document.createElement() 函数创建一个新的 DOM 节点。对于 SVG 元素，HostComponent 会调用 document.createElementNS() 函数创建一个新的 DOM 节点。

更新 DOM 属性

在第一次渲染阶段，HostComponent 还会根据虚拟 DOM 节点上的属性更新相应的 DOM 节点属性。对于普通的 HTML 元素，HostComponent 会调用 setAttribute() 函数更新 DOM 节点属性。对于 SVG 元素，HostComponent 会调用 setAttributeNS() 函数更新 DOM 节点属性。

更新子组件

在第一次渲染阶段，HostComponent 还会根据虚拟 DOM 节点上的子组件更新相应的 DOM 子组件。对于 Function 组件，HostComponent 会调用 React.createElement() 函数创建一个新的组件实例，然后调用 render() 函数渲染组件。对于 Class 组件，HostComponent 会调用 new 操作符创建一个新的组件实例，然后调用 render() 函数渲染组件。

在 React 源码中的实现

在 React 源码中，HostComponent 的更新过程主要由 update() 函数实现。update() 函数会根据虚拟 DOM 节点的类型调用不同的函数来更新 DOM 节点。对于普通 HTML 元素，update() 函数会调用 updateDOMProperties() 函数来更新 DOM 节点属性。对于 SVG 元素，update() 函数会调用 updateDOMProperties() 函数和 updateDOMChildren() 函数来更新 DOM 节点属性和子组件。

总结

在 React 中，HostComponent 是一个重要的组件，它负责创建 DOM 节点、更新 DOM 属性和更新子组件。HostComponent 的更新过程分为多次渲染阶段和第一次渲染阶段。在多次渲染阶段，HostComponent 会根据 Diff 算法来更新 DOM 节点。在第一次渲染阶段，HostComponent 会根据虚拟 DOM 节点的类型创建相应的 DOM 节点、更新 DOM 属性和更新子组件。