React源码分析-CSDN博客

组件是什么样的？

下面是一个简单的组件打印一下这个组件，发现其实是一个js对象，而不是真实的dom。那么react是如何将react组件生成js对象的呢？这是因为我们在创建组件的时候，使用了extends.React.Component,即继承了Component，看下Component的源码

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.setState = function (partialState, callback) {}
Component.prototype.forceUpdate = function (callback) {}
复制代码

我们声明了一个组件，继承了Component，它的原型上有setState等方法。小结

组件初始化

我们在react类和我们平时写的js类都一样，唯一的区别在与react类多了一个render()方法，输出类似“这是A组件”的结构并挂载到真实DOM上，才能触发组件的生命周期并成为DOM树的一部分。首先我们看下render()方法

发现render()实际是是调用一个React.creatEment('div',null)，实际是实际是ReactElement方法这个方法的作用是：每一个组件的对象都是通过React.creatEment()创建出来的ReactElement类型的对象，ReactElement对象记录了组件的特征，比如key,type,ref,props等，这些特征与渲染成页面息息相关。下图是ReactElement方法源码：

小结

组件的挂载

我们知道react是通过ReactDOM.render(component,monutNode)的形式进行挂载的（可以挂载自定义组件，原生dom,字符串）挂载过程是怎么样的呢？

ReactDOM.render实际调用了内部的ReactMount.render，进而执行ReactMount._renderSubtreeIntoContainer。从字面意思上就可以看出是将"子DOM"插入容器的逻辑，我们看下源码实现:

render: function (element, container, callback) {
    return renderSubtreeIntoContainer(null, element, container, false, callback);
  },
  function renderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback){}
复制代码

我们看下renderSubtreeIntoContainer的入参：

parentComponent：当前组件的父组件，第一次渲染时为null children：要插入DOM中的组件，如helloWorld container：要插入的容器，如document.getElementById('root')