接上文,
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之前,你在这一步第一次看到它们。