React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非常艰辛的过程。在学习 React 源码的过程中，给我帮助最大的就是，于是决定基于这个系列文章谈一下自己的理解。本文会大量用到原文中的例子，想体会原汁原味的感觉，推荐阅读原文。
本系列文章基于 React 15.4.2 ，以下是本系列其它文章的传送门：
前面三篇文章介绍了 React 是怎么渲染普通DOM元素的，如下图所示。
红线部分生成的实际上是一层一层往回传，为了方便展示就直接跳过中间层级返回了。这张图片跳过了事务（transaction）相关的调用，后面会有专门的文章介绍。
本篇开始介绍自定义组件是如何渲染的。
将自定义组件命名为，结构如下：
App 经过 Babel 编译后，生成如下代码：
调用关系如下图所示：
渲染普通 DOM 元素的调用关系如下图所示，自定义组件的渲染调用关系见下文：
在 performInitialMount 这步，renderedElement 就是 ：
这步与第二篇的 performInitialMount 很相似，唯一区别就是渲染普通 DOM 元素返回的是，而渲染自定义组件返回的是包装好的自定义组件。
调用关系如下图所示：
在 performInitialMount 的后半部分，ReactReconciler.mountComponent 实际上会调用 ReactCompositeComponentins 的 mountComponent。这里的关键代码是
经过这步后，ReactCompositeComponentins._instance 等于 Appins。像之前一样，mountComponent 又会调用自身的 performInitialMount：
React.createElement 的嵌套调用是指：
这里 React.createElement 的调用顺序是先调用作为参数的 children，再调用父级。调用顺序已在代码中注释。
接下来的 _instantiateReactComponent 会返回，就触及到真正的 DOM 操作了。先看图，这部分内容将在下回分解～
到此这篇react组件定义（react 定义组件）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/52491.html