React Native中如何避免useState变量重复初始化（音乐应用场景）

你的核心问题是组件每次重新挂载时，useState([])会将trackList重置为空数组，同时原代码还存在闭包捕获旧状态、监听未清理的问题，以下是具体解决方案：

问题分析 #

1. 组件内的useState会在每次挂载时重新初始化，导致页面重新打开时trackList回到空数组。
2. 监听回调中直接使用trackList，会因为闭包捕获初始值，导致后续更新时用的是旧状态，无法正确追加新曲目。
3. 组件外的existsTrackListener变量不会随组件卸载重置，可能引发监听重复注册或无法重新注册的问题。

方案一：本地存储持久化状态（适合无全局状态的场景） #

使用AsyncStorage将trackList持久化到本地，组件挂载时读取恢复状态，更新时同步保存：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect, useRef } from 'react';
import { View, FlatList, Text } from 'react-native';

export default function Host({ navigation }) {
  const [trackList, setTrackList] = useState([]);
  const listenerRef = useRef(null); // 保存监听实例，用于卸载时清理

  // 挂载时读取本地存储的曲目列表
  useEffect(() => {
    const loadSavedTracks = async () => {
      const savedData = await AsyncStorage.getItem('savedTrackList');
      if (savedData) {
        setTrackList(JSON.parse(savedData));
      }
    };
    loadSavedTracks();

    // 注册监听，用函数式更新避免闭包问题
    listenerRef.current = setTrackListener(roomID, (t) => {
      if (t != null) {
        setTrackList(prevTracks => {
          const newTracks = [...prevTracks, t.name];
          // 同步保存到本地存储
          AsyncStorage.setItem('savedTrackList', JSON.stringify(newTracks));
          return newTracks;
        });
      }
    });

    // 卸载组件时清理监听，防止内存泄漏
    return () => {
      if (listenerRef.current) {
        listenerRef.current(); // 假设setTrackListener返回清理函数
      }
    };
  }, []); // 空依赖数组，仅在组件挂载时执行一次

  return (
    <View style={styles.container}>
      <FlatList
        data={trackList}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      />
    </View>
  );
}

方案二：全局状态管理（适合多组件共享状态的场景） #

将trackList放到全局Context中，确保组件卸载再挂载时状态不会丢失：

1. 创建TrackList Context #

import { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const TrackListContext = createContext();

export function TrackListProvider({ children }) {
  const [trackList, setTrackList] = useState([]);

  // 初始化时读取本地存储
  useEffect(() => {
    const loadSavedTracks = async () => {
      const savedData = await AsyncStorage.getItem('savedTrackList');
      if (savedData) {
        setTrackList(JSON.parse(savedData));
      }
    };
    loadSavedTracks();
  }, []);

  // 封装添加曲目的方法
  const addTrack = (trackName) => {
    setTrackList(prev => {
      const newTracks = [...prev, trackName];
      AsyncStorage.setItem('savedTrackList', JSON.stringify(newTracks));
      return newTracks;
    });
  };

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

// 自定义Hook简化Context调用
export function useTrackList() {
  return useContext(TrackListContext);
}

2. 在Host组件中使用全局状态 #

import { useEffect, useRef } from 'react';
import { View, FlatList, Text } from 'react-native';
import { useTrackList } from './TrackListContext';

export default function Host({ navigation }) {
  const { trackList, addTrack } = useTrackList();
  const listenerRef = useRef(null);

  useEffect(() => {
    // 注册监听
    listenerRef.current = setTrackListener(roomID, (t) => {
      if (t != null) {
        addTrack(t.name);
      }
    });

    // 卸载时清理监听
    return () => {
      if (listenerRef.current) {
        listenerRef.current();
      }
    };
  }, [addTrack]);

  return (
    <View style={styles.container}>
      <FlatList
        data={trackList}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      />
    </View>
  );
}

关键优化点 #

• 使用函数式更新setTrackList(prev => ...)，确保每次更新都能拿到最新的状态，避免闭包问题。
• 用useRef保存监听实例，在组件卸载时清理监听，防止内存泄漏。
• 通过本地存储或全局状态，让trackList在组件挂载/卸载周期外保持持久化。

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