2. Extension生命周期

视频介绍

山海鲸二次开发教程：Extension 的生命周期
大家好，欢迎大家来到山海鲸二次开发教程。

上一节课，我们已经给大家介绍了二次开发的一个入口。这节课，我们一起看一下二次开发中最简单、最基础的一个概念——Extension 的生命周期。

首先，我们来到文档，看一下什么是 Extension。我们正常打开应该是到开发概述，展开组件二开，找到基础教程，点开这个 Extension 生命周期。

对于我们的一个基础的二开类，比如我们写 class Button，那它隐含了一个隐式继承 Extension 类，也就是说这里是这样一个 extends Extension 这样的类。那么这个类上，有个生命周期。我们整个组件的二开代码的创建、运行和销毁，就是调用这些生命周期来执行的。

那么，大家可以在生命周期里面写出自己的代码。这样子，在不同的阶段，比如初始化的时候，去初始化一些具体的变量；在 update 的时候去改变它的位置；在 destroy 的时候，去清理一些占用内存比较大的变量，比如数组，来防止 GC 过于缓慢的问题。

所以，Extension 的生命周期也是一个我们非常重要的概念。我们现在简单给大家介绍一下，一共是 4 个方法，分别是 init、ready、update 和 destroy。

其中，我先讲这个 init 和 ready。init 和 ready 都是用在初始化的代码。就比如说，我想初始化这个最开始的位置，或者最开始一些变量，都可以放在 init 或者 ready 里面。

那这两个生命周期的方法有什么区别呢？我们在这里可以看到这句注释，它们最大的区别就在于 init 是只关注它自己的。也就是说，比如我对这个 Button 自己内部的一些变量进行初始化，那么写在 init 里面。而 ready，它是要关注其它组件的，它实际上是在等所有场景中的组件全部调用完 init 之后，才会开始调各个组件的 ready。

也就是说，比如当我这个 Button 的组件要依赖于一个 Button2 另外一个组件的话，特别是依赖于 Button2 里面的 init 方法执行完了之后，再去初始化我的这个 Button1 的类，那么我这一段的逻辑就应该写在 ready 里面。因为 ready 会等着 Button2 的 init 方法执行完，它才会去执行。这就是 ready 方法。

而 destroy 是对整个这样一个 Extension 的清理。我们正常情况下，会有以下几种情况会自动调用 destroy 方法：

当我叉掉这个代码文件，就是说取消挂载整个脚本的时候，它会调用 destroy。
是我们在关掉整个项目的时候。
如果我们这个项目是在 web 中打开，关闭整个页面的时候，都会去调用 destroy 方法。
destroy 方法重点是要去清理 init 或者 ready 里面去初始化的一些大的数组，或者 map 这类内存占用比较大的变量。因为我在这里主动清理掉，比如 clear，或者 length = 0，那这样子的话，我们就可以不用去等 GC 来清理这些变量，对内存的优化是有非常大的好处的。

最后是这个 update 方法。update 方法可以看到，它是每一帧都需要调用的。什么是每一帧？我们知道在 js 里面有个叫 requestAnimationFrame 这样一个方法，也就是说当我整个画面每刷新一下，它都会去调用一次。那这种就特别适合去写一些动画，比如说位置更新。但是，它非常不适合去写一些性能消耗非常大的计算，这个大家特别要注意。

我们在真实的项目中，经常会看到我们一些二开代码，它可能每一帧需要去计算，但是有一些预计算的方法，明明应该写在 init 或者 ready 里面，它不去预计算，它每一帧都在这里计算，那这个消耗的性能就会很大了。特别是我们看到右下角，到时候它这个 FPS 就会掉得很厉害。

这就是我们整个的生命周期。

那我们今天也带大家一起先写个小例子，就是我要去通过我的生命周期的方法，按这个 update 的方法来让我们的这个组件在画面中运动，也就是改变它的 x 值。我们看一下怎么做。

首先，我们按一下这个编辑按钮，就打开这个类了。最简单的方法，就是直接在 update 里面去写。我们在这里写一个思路，是 set x++，大概就这样一个思路。

那么怎么去实现呢？我们前面第一节课其实也讲过，我们点它，然后找到它来看一下，这是它的组件位置。比如我们在这里，其实我就知道，我们在这里用滚轮，我们就可以看到，我