【Under-the-hood-ReactJS-Part4】React源码解读

接上文，

React流程图：
https://bogdan-lyashenko.gith...

子组件挂载

我们继续探究mount方法。

如果渲染的标签里有复杂的html标签，如video，form，textarea等，React会包装一些额外的信息。React会对一些多媒体相关的事件添加一些额外的监听器，如audio标签的volumechange事件，或者就简单包装下一些标签的原生行为，如select，textarea等等。有很多类似于上面的包装器，如ReactDOMSelect，ReactDOMTextarea（位于src/renderers/dom/client/wrappers/folder）。对于我们的实例代码而言，就是div标签，所以没有额外的处理过程。

属性验证

紧接着的被调用的验证方法用于确保props被正确设置，否则，React会抛出异常。比如，如果设置了props.dangerouslySetInnerHTML(调用这个方法一般用于插入一段html字符串)且参数对象的__html属性缺失，则下面的错误会被抛出：

props.dangerouslySetInnerHTML must be in the form {__html:...}. Please visit https://fb.me/react-invariant... for more information.

创建HTML元素

最后，真正的html元素会通过document.createElement方法被创建，对于我们来说就是div标签。在我们引入虚拟DOM之前，你在这一步第一次看到它们。