相信很多新手朋友，肯定会问，CocosCreator 中什么是节点？什么是组件？
一、什么是组件（Component）？
Cocos Creator 3.8 的工作流程是以组件式开发为核心，即以组合而非继承的方式进行游戏中各种元素的构建，被称为组件式架构（Entity-Component System）。
所有继承自Component的类都称为组件类，其对象称为组件，组件是由引擎创建，组件类必须是 cc 类。
例如：
import { Component } from 'cc'; @ccclass("MyComponent") class MyComponent extends Component { }
二、什么是节点（Node）？
节点是承载组件的实体，我们通过将具有各种功能的组件挂载到节点上，来让节点具有各式各样的表现和功能。
节点是场景的基础组成单位。节点之间是树状的组织关系，每个节点可以有多个子节点。
节点特性：
- 节点包含一组基础属性（位移、旋转、缩放），节点之间通过一组相对变换关系组织在一起。
- 节点间的更新顺序是逐级更新的，子节点的更新依赖于父节点，子节点跟随父节点变换。
- 节点上可以添加组件，将多个组件与节点关联在一起。
三、组件的创建和销毁
组件的生命周期完全由节点操控，与普通类对象不同，组件不能由构造函数创建：
const component = new NewComponent(); // 错误：组件无法由构造函数创建
组件必须由节点来创建，通过如下方法将组件添加到节点上：
const newComponent = node.addComponent(NewComponent);
组件不需要的时候，通过如下方法移除指定的组件并将其销毁：
node.removeComponent(newComponent)
四、组件执行顺序
在同一个节点上的组件执行顺序，可以通过设置组件的 executionOrder来实现。
executionOrder 越小，该组件相对其它组件就会越先执行。
executionOrder 默认为 0，因此设置为负数的话，就会在其它默认的组件之前执行。
例如：有两个组件 CompA.ts 和 CompB.ts ，在main.ts 中使用，假如我们希望CompB.ts 优先执行。
CompA.ts 脚本内容：
import { _decorator, Component, Node } from 'cc'; const { ccclass, property } = _decorator; @ccclass("CompA") export class CompA extends Component { onLoad () { console.log('CompA onLoad!'); } start () { console.log('CompA start!'); } update (deltaTime: number) { console.log('CompA update!'); } }
CompB.ts 脚本内容：
import { _decorator, Component, Node } from 'cc'; const { ccclass, property,executionOrder } = _decorator; @ccclass("CompB") @executionOrder(-1) export class CompB extends Component { onLoad () { console.log('CompB onLoad!'); } start () { console.log('CompB start!'); } update (deltaTime: number) { console.log('CompB update!'); } }
main.ts 脚本内容：
import { _decorator, Component, log } from 'cc'; const { ccclass, property } = _decorator; import { CompB } from './CompB'; import { CompA } from './CompA'; @ccclass('main') export class main extends Component { @property({type:CompA}) private CompA = null; @property({type:CompB}) private CompB = null; onLoad() { } start() { } update(deltaTime: number) { } }
执行顺序如下：
五、 组件的生命周期
Cocos Creator 为组件提供了生命周期的回调函数，只需要定义特定的回调函数，Creator 会在特定的时期自动执行相关脚本，开发者不需要手工调用它们。
按生命周期触发先后，回调函数有以下：
- onLoad
- onEnable
- start
- update
- lateUpdate
- onDisable
- onDestroy
1、onLoad
onLoad 回调，在脚本初始化阶段回调，当节点首次激活时触发。
例如：所在的场景被载入，或者所在节点被激活的情况下。
在 onLoad 阶段，可以保证获取到场景中的其他节点，以及节点关联的资源数据。 通常会在 onLoad 阶段去做一些初始化相关的操作。
例如：
import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite, find} from 'cc'; const { ccclass, property,type,integer} = _decorator; @ccclass('PlayerControl') export class PlayerControl extends Component { @property({type:Node,visible:true}) node:Node = null; @property({type:Node,visible:true}) nodeChild:Node = null; onLoad() { this.nodeChild = find('test/sp',this.node); } }
2、onEnable
当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。
倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。
3、start
start回调函数会在组件第一次激活前，也就是第一次执行update` 之前触发。
start 通常用于初始化一些中间状态的数据，这些数据可能在 update 时会发生改变，并且被频繁的 enable 和 disable。
import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite, find} from 'cc'; const { ccclass, property,type,integer} = _decorator; @ccclass('PlayerControl') export class PlayerControl extends Component { @property({type:Node,visible:true}) node:Node = null; @property({type:Node,visible:true}) nodeChild:Node = null; private _timer: number = 0.0; onLoad() { this.nodeChild = find('test/sp',this.node); } start() { this._timer = 1.0; } update(deltaTime: number) { this._timer += deltaTime; if(this._timer >= 10.0){ console.log('enabled false '); this.enabled = false; } } }
4、update
游戏开发的一个关键点是在每一帧渲染前更新物体的状态和方位。这些更新操作通常都放在 update 回调中。
import { _decorator, Component, Node } from 'cc'; const { ccclass, property } = _decorator; @ccclass("PlayerControl") export class PlayerControl extends Component { @property({type:Node,visible:true}) node:Node = null; update (deltaTime: number) { this.node.setPosition(0.0,10.0*deltaTime,0.0); } }
5、lateUpdate
如果我们要在动效（如动画、粒子、物理等）更新后进行一些操作，或者在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调。
import { _decorator, Component, Node } from 'cc'; const { ccclass, property } = _decorator; @ccclass("PlayerControl") export class PlayerControl extends Component { @property({type:Node,visible:true}) node:Node = null; lateUpdate (deltaTime: number) { this.node.setPosition(0.0,deltaTime,0.0); } }
6、onDisable
当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。
7、onDestroy
当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。
