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

    原文作者:剡山
    原文地址: https://segmentfault.com/a/1190000015433310
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞