一直没弄明白，这两者啥关系， 看了一下底层源码，大致知道了些。

 

一个组件必然会挂到node上。 在脚本组件中通过this.node.getComponent获取组件。creator 提供了this.getComponent 方法

    getComponent (typeOrClassName) {
        return this.node.getComponent(typeOrClassName);
    },

 

一个node由N个组件组成。通过this.getComponent获取组件

一个预制体由N个节点组成。  一个预制体相当于一个复杂点节点或者具有特殊功能的一个节点集合。 任何节点都可以预制，预制出来可以反复应用。

预制体可以包含其他预制体。

 

组件没有继承节点，组件不是节点， 如果把人比作节点，那么组件就是人的基因， 有什么特征完全靠组件支持。

cocos creator编辑器内置了很多组件， ccLable ccSprite等。

说到这里，得总结一下： N个组件组合成一个节点.    N个子节点组合成策划产品要的东东。 引擎核心就是渲染这个东东。

除了脚本组件， 基本上所有的组件都有自己的render.     如cc.Sprite render的是图片。  cc.Label draw的是文本字符串或者文字图像等

 

关于mainloop：

执行当前场景中所有组件的start, update, lateUpdate方法。

遍历节点树，开始渲染。 最终会用canvas或者opengles绘画

RenderFlow.render = function (rootNode, dt) {
    _batcher.reset();
    _batcher.walking = true;

    RenderFlow.visitRootNode(rootNode);

    _batcher.terminate();
    _batcher.walking = false;

    _forward.render(_batcher._renderScene, dt);
};

一个节点的处理流程和_renderFlag有关。

function createFlow (flag, next) {
    let flow = new RenderFlow();
    flow._next = next || EMPTY_FLOW;

    switch (flag) {
        case DONOTHING: 
            flow._func = flow._doNothing;
            break;
        case BREAK_FLOW:
            flow._func = flow._doNothing;
            break;
        case LOCAL_TRANSFORM: 
            flow._func = flow._localTransform;
            break;
        case WORLD_TRANSFORM: 
            flow._func = flow._worldTransform;
            break;
        case OPACITY:
            flow._func = flow._opacity;
            break;
        case COLOR:
            flow._func = flow._color;
            break;
        case UPDATE_RENDER_DATA:
            flow._func = flow._updateRenderData;
            break;
        case RENDER: 
            flow._func = flow._render;
            break;
        case CHILDREN: 
            flow._func = flow._children;
            break;
        case POST_RENDER: 
            flow._func = flow._postRender;
            break;
    }

    return flow;
}