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

发布时间:2019-06-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【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之前,你在这一步第一次看到它们。

脚本宝典总结

以上是脚本宝典为你收集整理的【Under-the-hood-ReactJS-Part4】React源码解读全部内容,希望文章能够帮你解决【Under-the-hood-ReactJS-Part4】React源码解读所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。