React Native每日视频功能优化：解决首次安装无内容问题

核心需求是首次安装APP时立即生成随机视频，之后仅在每日00:00自动更新，同时避免每秒重复触发状态更新带来的性能问题。以下是具体优化方案：

关键优化点 #

• 首次启动时优先检查本地存储，无数据则立即生成随机视频并存储
• 优化时间监听逻辑，避免每秒执行状态更新和存储读取
• 防止0点时刻因每秒刷新导致handleRandomVideo重复执行

修改后的完整代码 #

import AsyncStorage from '@react-native-async-storage/async-storage';
import dailyvideo from '../assets/data/dailyvideo';

const [newvideo, setNewVideo] = useState({
  title: 'Seoi Nage',
  url: 'seoinage.mp4',
  thumbnail: "seionage.jpeg"
});
// 记录是否已经执行过当日的更新，避免0点重复触发
const [hasUpdatedToday, setHasUpdatedToday] = useState(false);

const getStoredVideo = async () => {
  try {
    const [title, url, thumbnail] = await AsyncStorage.multiGet([
      "title", 
      "url", 
      "thumbnail"
    ]);
    // 如果存储中有数据，更新状态
    if (title[1] && url[1] && thumbnail[1]) {
      setNewVideo({
        title: title[1],
        url: url[1],
        thumbnail: thumbnail[1]
      });
    } else {
      // 首次安装无数据，立即生成随机视频
      await generateAndStoreRandomVideo();
    }
  } catch (error) {
    console.error('读取存储失败:', error);
  }
};

const generateAndStoreRandomVideo = async () => {
  // 修正变量名：原代码中allwaza未定义，改为导入的dailyvideo数组
  const randomIndex = Math.floor(Math.random() * dailyvideo.length);
  const randomItem = dailyvideo[randomIndex];

  try {
    await AsyncStorage.multiSet([
      ["title", randomItem.title],
      ["url", randomItem.url],
      ["thumbnail", randomItem.thumbnail]
    ]);
    // 存储后直接更新状态，无需再次读取
    setNewVideo(randomItem);
  } catch (error) {
    console.error('存储视频数据失败:', error);
  }
};

const checkMidnightUpdate = () => {
  const now = new Date();
  // 判断是否是0点整，且当日未执行过更新
  if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0 && !hasUpdatedToday) {
    generateAndStoreRandomVideo();
    setHasUpdatedToday(true);
  }
  // 非0点时重置标记，确保次日能正常触发
  if (now.getHours() !== 0) {
    setHasUpdatedToday(false);
  }
};

useEffect(() => {
  // 组件挂载时先读取存储，处理首次加载逻辑
  getStoredVideo();

  // 设置每分钟检查一次，替代每秒刷新，降低性能消耗
  const interval = setInterval(() => {
    checkMidnightUpdate();
  }, 60000);

  return () => {
    clearInterval(interval);
  };
}, []);

return (
  <View>
    <Text>Today's Suggested Tech </Text>
    <View>
      {/* 跳转视频播放器 */}
      <TouchableOpacity onPress={() => navigation.navigate('VideoPlayer', {data: newvideo})}>
        <Image source={{uri: newvideo.thumbnail}}/>
      </TouchableOpacity>
      <Text> {newvideo.title} </Text>
    </View>
  </View>
);

优化说明 #

1. 首次加载处理：组件挂载时调用getStoredVideo，先读取本地存储，若为空则立即执行generateAndStoreRandomVideo生成随机视频，确保首次打开就有内容
2. 性能优化：将每秒更新时间的interval改为每分钟检查一次0点，减少不必要的状态更新和函数执行
3. 重复执行防护：通过hasUpdatedToday状态标记，确保每日0点仅执行一次随机视频生成，避免因每秒刷新导致重复操作
4. 代码健壮性：使用multiGet和multiSet批量操作存储，减少异步调用次数；添加错误捕获，处理存储读写失败的情况
5. 变量修正：原代码中allwaza未定义，改为导入的dailyvideo数组

内容的提问来源于stack exchange，提问作者LOTUSMS