内存优化

小程序运行在有限的系统资源中。当内存占用过高时，小程序可能被系统销毁或客户端主动回收，导致用户需要重新打开小程序，体验非常糟糕。

内存问题的表现

表现	可能原因
小程序突然闪退	内存占用过高，被系统回收
页面越用越卡	内存泄漏，可用内存逐渐减少
返回之前的页面变慢	页面栈过深，占用大量内存

监听内存告警

使用 onMemoryWarning 监听内存告警事件，在收到告警时进行必要的内存清理：

import { onMemoryWarning } from '@ray-js/ray';

onMemoryWarning((res) => {
  console.warn('内存告警，级别:', res.level);
});

避免内存泄漏

及时清理定时器

页面组件卸载时，必须清理关联的定时器：

import React, { useEffect } from 'react';

function fetchLatestData() {}

function DevicePage() {
  useEffect(() => {
    const timer = setInterval(() => {
      fetchLatestData();
    }, 5000);

    return () => clearInterval(timer); // 组件卸载时自动清理
  }, []);
}

及时解绑事件监听

注册的事件监听在组件卸载时应及时解绑：

import React, { useEffect } from 'react';
import { onNetworkStatusChange, offNetworkStatusChange } from '@ray-js/ray';

function DevicePage() {
  useEffect(() => {
    const handler = (res) => console.log('网络状态:', res.isConnected);
    onNetworkStatusChange(handler);

    return () => offNetworkStatusChange(handler);
  }, []);
}

控制页面栈深度

页面栈过深会占用大量内存，合理选择导航方式：

方法	效果	适用场景
`navigateTo`	新增一层页面栈	需要返回的页面跳转
`redirectTo`	替换当前页面	不需要返回的跳转
`reLaunch`	清空页面栈	登录后跳转首页等场景

控制数据规模

避免在状态或全局变量中存储过大的数据，使用分页只保留当前展示所需的数据：

import React, { useState } from 'react';

async function fetchProducts(params: { page: number; pageSize: number }) {
  return { data: [] };
}

function ProductList() {
  const [list, setList] = useState([]);

  const loadMore = async (page: number) => {
    const res = await fetchProducts({ page, pageSize: 20 });
    setList(prev => [...prev, ...res.data]); // 追加而非全量替换
  };
}

控制代码包体积

代码包体积不仅影响下载耗时，也直接影响运行时的内存占用。代码包在加载时需要被解析和执行，体积越大，占用的内存越多。减小代码包体积是降低内存基线的有效手段之一。

详见代码包体积优化。

检查清单

检查项	优化方法
定时器是否在组件卸载时清理	及时清理定时器
事件监听是否在组件卸载时解绑	及时解绑事件监听
页面跳转方式是否合理	不需要返回的场景使用 redirectTo
是否存储了过大的数据	使用分页加载，只保留当前页数据

#内存优化

#内存问题的表现

#监听内存告警

#避免内存泄漏

#及时清理定时器

#及时解绑事件监听

#控制页面栈深度

#控制数据规模

#控制代码包体积

#检查清单