HarmonyOS 鸿蒙Next @Entry组件的销毁过程解释

页面的生命周期有哪些？

1. 创建阶段（Creation）
   • 组件初始化（Component Initialization）
     • 这是页面生命周期的起始点。当页面首次加载时，相关的组件会被创建。这个过程包括分配内存来存储组件的状态和属性。例如，在一个使用JavaScript框架构建的网页中，组件对象会在内存中被实例化，它的构造函数会被调用，初始化组件的初始状态，如设置默认的文本内容、初始的样式属性等。
   • 数据获取（Data Fetching）
     • 在组件初始化后，通常会进行数据获取操作。如果页面需要展示数据，如从服务器获取用户信息、商品列表等，会在这个阶段发起请求。例如，在一个电商网页中，页面加载时会发送API请求到服务器获取商品分类和热门商品信息，这些数据将用于填充页面的相应部分，如商品列表区域和分类导航栏。
   • 视图构建（View Construction）
     • 根据获取的数据和组件的初始状态，开始构建页面的视图。这涉及到将组件的HTML（或其他标记语言）模板与数据进行结合，生成最终呈现给用户的页面内容。例如，使用模板引擎将获取的商品信息填充到商品列表组件的HTML模板中，生成包含实际商品信息的列表项，从而构建出完整的商品列表视图。
2. 挂载阶段（Mounting）
   • DOM插入（DOM Insertion）
     • 构建好的视图会被插入到文档对象模型（DOM）中。在网页环境中，这意味着页面元素会被添加到浏览器的DOM树中，成为可见的页面内容。例如，当一个新的组件视图构建完成后，它会被添加到页面的特定位置，如一个模态框组件会被插入到页面的主体部分，使其在页面上显示出来。
   • 样式计算与应用（Style Calculation and Application）
     • 插入DOM后，浏览器会计算组件的样式。这包括解析CSS样式规则，根据选择器确定每个组件的样式属性，同时考虑继承、优先级等因素。例如，对于一个具有自定义样式的按钮组件，浏览器会计算其背景颜色、字体大小等样式属性，并将其应用到组件上，使其按照预期的样式显示。
   • 布局计算（Layout Calculation）
     • 接着进行布局计算，确定每个组件在页面中的位置和尺寸。浏览器会根据组件的类型、样式属性（如宽度、高度、浮动、定位等）以及页面的整体布局规则来安排组件的位置。例如，在一个响应式网页中，根据屏幕的宽度和组件的布局方式（如流式布局或弹性布局），计算出每个组件应该占据的空间大小和位置，以实现页面的合理布局。
3. 更新阶段（Updating）
   • 数据更新（Data Update）
     • 当页面的数据发生变化时，会触发更新阶段。这可能是由于用户的操作（如提交表单、点击按钮等）或者服务器推送了新的数据。例如，在一个社交网页中，用户发布了一条新的动态，服务器将新动态的数据发送给客户端，客户端收到数据后需要更新页面上的动态列表部分。
   • 组件重新渲染（Component Re - rendering）
     • 数据更新后，相关的组件通常需要重新渲染。这可能涉及到重新执行组件的模板渲染函数，将新的数据与模板结合生成新的视图内容。例如，对于一个使用数据绑定的文本组件，当绑定的数据发生变化时，组件会根据新的数据重新生成文本内容并更新到页面上。
   • DOM更新（DOM Update）
     • 重新渲染后的视图内容需要更新到DOM中。这个过程可能是部分更新，即只更新发生变化的组件部分，而不是整个页面。例如，在一个具有多个选项卡的页面中，当用户切换选项卡时，只需要更新当前选项卡的内容，而不是重新加载整个页面，这样可以提高页面更新的效率。
4. 卸载阶段（Unmounting）
   • 事件解绑（Event Unbinding）
     • 当页面要被卸载时，首先要做的是解绑所有绑定在组件上的事件监听器。这是为了防止在组件被移除后，仍然响应事件而导致的错误。例如，一个包含按钮点击事件监听器的组件，在卸载时会将这个监听器从按钮元素上移除。
   • 资源清理（Resource Cleanup）
     • 然后清理组件占用的各种资源。这包括释放内存中的数据对象、关闭网络连接（如果有）、清除定时器等。例如，一个在页面加载时创建了定时器来定期更新数据的组件，在卸载时会清除这个定时器，以避免资源浪费和潜在的错误。
   • DOM移除（DOM Removal）
     • 最后，将组件从DOM树中移除，使页面不再显示该组件。这是卸载阶段的最后一步，完成后，页面的布局和内容会相应地调整，以适应组件的移除。例如，在一个动态加载和卸载组件的单页应用中，当一个模态框组件被卸载后，页面会恢复到没有模态框的状态，其他组件的布局会重新调整以填充原来模态框占据的空间。