React Native中持久化管理useState状态的策略与实践

import React, { createContext, useState, useEffect, useCallback } from 'react';
// 假设这是你的外部服务，用于设置和清理监听器
// setTrackListener应返回一个取消订阅的函数
import { setTrackListener } from '../services/trackService'; 

// 创建TrackListContext，初始值为一个空数组（或根据实际情况设置默认值）
export const TrackListContext = createContext([]);

/**
 * TrackListProvider 组件
 * 负责管理trackList状态及其相关的监听器逻辑
 * @param {object} props - 组件属性
 * @param {React.ReactNode} props.children - 子组件
 * @param {string} props.roomID - 房间ID，用于设置监听器
 */
export const TrackListProvider = ({ children, roomID }) => {
  const [trackList, setTrackList] = useState([]);

  // 使用useEffect来管理监听器的生命周期
  useEffect(() => {
    // 确保roomID存在才设置监听器
    if (!roomID) {
      console.warn("roomID is not provided to TrackListProvider. Listener will not be set.");
      return;
    }

    console.log(`Setting track listener for roomID: ${roomID}`);

    // 设置监听器，并期望setTrackListener返回一个清理函数
    const unsubscribe = setTrackListener(roomID, (track) => {
      if (track != null) {
        // 使用函数式更新确保基于最新状态进行更新
        setTrackList(prevList => [...prevList, track.name]);
        console.log(`Track added: ${track.name}, current list: ${[...trackList, track.name]}`);
      }
    });

    // 返回清理函数，在组件卸载或roomID变化时执行
    return () => {
      console.log(`Cleaning up track listener for roomID: ${roomID}`);
      unsubscribe();
    };
  }, [roomID]); // 依赖roomID，当roomID变化时重新设置监听器

  return (
    <TrackListContext.Provider value={{ trackList, setTrackList }}>
      {children}
    </TrackListContext.Provider>
  );
};

// 模拟一个外部服务，实际中可能是Firebase、WebSocket等
export const setTrackListener = (roomID, callback) => {
  console.log(`[Mock Service] Listener registered for room: ${roomID}`);
  // 模拟每隔3秒添加一个新轨道
  let trackCount = 0;
  const intervalId = setInterval(() => {
    trackCount++;
    const trackName = `Track ${trackCount} from ${roomID}`;
    callback({ name: trackName });
  }, 3000);

  // 返回一个清理函数
  return () => {
    console.log(`[Mock Service] Listener unregistered for room: ${roomID}`);
    clearInterval(intervalId);
  };
};

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { TrackListProvider } from './contexts/TrackListContext';
import HostScreen from './HostScreen'; // 你的Host组件现在是HostScreen

export default function App() {
  // 假设roomID来自用户选择、API请求或路由参数
  const currentRoomID = 'music-room-123'; 

  return (
    <SafeAreaView style={styles.container}>
      {/* 将TrackListProvider放置在需要访问其状态的组件之上 */}
      <TrackListProvider roomID={currentRoomID}>
        <HostScreen />
      </TrackListProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

import React, { useContext } from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';
import { TrackListContext } from './contexts/TrackListContext';

export default function HostScreen() {
  // 从Context中获取trackList
  const { trackList } = useContext(TrackListContext);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Current Track List:</Text>
      <FlatList
        data={trackList}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        // 为FlatList的每个项提供唯一的key，提高性能和稳定性
        keyExtractor={(item, index) => item + index.toString()} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#f0f0f0',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 15,
    color: '#333',
  },
  item: {
    padding: 15,
    fontSize: 18,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    backgroundColor: '#fff',
    marginHorizontal: 10,
    marginVertical: 4,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 3,
  },
});

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'; // 假设已安装

const TRACK_LIST_KEY = '@my_music_app:track_list';

function MusicPlayerScreen() {
  const [trackList, setTrackList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // 1. 应用启动/组件挂载时加载数据
  useEffect(() => {
    const loadTrackList = async () => {
      try {
        const storedList = await AsyncStorage.getItem(TRACK_LIST_KEY);
        if (storedList !== null) {
          setTrackList(JSON.parse(storedList));
        }
      } catch (error) {
        console.error("Failed to load track list from AsyncStorage", error);
      } finally {
        setIsLoading(false);
      }
    };
    loadTrackList();
  }, []); // 仅在组件首次挂载时执行

  // 2. trackList变化时保存数据
  useEffect(() => {
    // 避免首次加载时保存空数据
    if (!isLoading) { 
      const saveTrackList = async () => {
        try {
          await AsyncStorage.setItem(TRACK_LIST_KEY, JSON.stringify(trackList));
          console.log("Track list saved to AsyncStorage.");
        } catch (error) {
          console.error("Failed to save track list to AsyncStorage", error);
        }
      };
      // 可以添加防抖逻辑，避免频繁写入
      const timer = setTimeout(saveTrackList, 500); 
      return () => clearTimeout(timer); // 清理定时器
    }
  }, [trackList, isLoading]); // 依赖trackList和isLoading

  // ... 渲染组件，例如FlatList展示trackList
  return (
    <View>
      {isLoading ? <Text>Loading tracks...</Text> : (
        <FlatList
          data={trackList}
          renderItem={({ item }) => <Text>{item}</Text>}
          keyExtractor={(item, index) => item + index.toString()}
        />
      )}
    </View>
  );
}