Navigation Container刷新致页面状态丢失问题求助

当设备主题切换或default_scheme状态更新时，NavigationContainer会触发重渲染，进而导致Tab页面完全刷新，输入框内容等操作进度丢失。同时，在Home组件中添加的空依赖useEffect会每次都执行，说明组件被重新挂载了。

原代码如下：

function AppHome({colorMode, currentLang, restartApp}) {
    const default_scheme = useColorScheme()
    let [color_choice, setColor_choice] = useState(colorMode)
    let [lang, setLang] = useState(currentLang)

    const colors = {
        auto: color_choice === "auto",
        ...(color_choice === "light" || color_choice === "auto" && default_scheme === "light") ? LightColors : DarkColors
    }

    const Home = ({navigation, route}) => (
        <HomePage
        navigation={navigation}
        openPremium={() => {}}
        NavigationBar={() => {}}
        restartApp={restartApp}
        />
    )

    return (
        <LanguageContext.Provider value={{lang, setLang}} >
            <ThemeContext.Provider value={colors} >
                <NavigationContainer>     
                    <Tab.Navigator screenOptions={{
                        headerShown: false,
                        tabBarStyle: {display: 'none'},
                    }} >
                        <Tab.Screen name={'Home'} component={Home} />
                    </Tab.Navigator>
                </NavigationContainer>
            </ThemeContext.Provider>
        </LanguageContext.Provider>
    );
}

解决方案 #

1. 保证Home组件引用稳定 #

问题核心在于：Home组件定义在AppHome内部，每次AppHome重渲染时，Home都会被重新创建为一个全新的组件函数。React Navigation会判定这是不同的组件，因此卸载旧实例、挂载新实例，导致状态丢失。

解决方法有两种：

方法一：将Home组件移到AppHome外部

// 将Home组件移到AppHome外部，确保组件引用始终不变
const Home = ({navigation, route, restartApp}) => (
    <HomePage
        navigation={navigation}
        openPremium={() => {}}
        NavigationBar={() => {}}
        restartApp={restartApp}
    />
);

function AppHome({colorMode, currentLang, restartApp}) {
    const default_scheme = useColorScheme()
    const [color_choice, setColor_choice] = useState(colorMode)
    const [lang, setLang] = useState(currentLang)

    return (
        <LanguageContext.Provider value={{lang, setLang}} >
            <ThemeContext.Provider value={{
                auto: color_choice === "auto",
                ...(color_choice === "light" || (color_choice === "auto" && default_scheme === "light")) ? LightColors : DarkColors
            }} >
                <NavigationContainer>     
                    <Tab.Navigator screenOptions={{
                        headerShown: false,
                        tabBarStyle: {display: 'none'},
                    }} >
                        <Tab.Screen 
                            name={'Home'} 
                            component={Home} 
                            initialParams={{restartApp}} // 通过initialParams传递restartApp
                        />
                    </Tab.Navigator>
                </NavigationContainer>
            </ThemeContext.Provider>
        </LanguageContext.Provider>
    );
}

方法二：用useMemo缓存Home组件

如果Home组件必须定义在AppHome内部，使用useMemo缓存组件，仅当依赖项变化时才重新创建：

function AppHome({colorMode, currentLang, restartApp}) {
    const default_scheme = useColorScheme()
    const [color_choice, setColor_choice] = useState(colorMode)
    const [lang, setLang] = useState(currentLang)

    // 缓存Home组件，仅当restartApp变化时更新
    const Home = useMemo(() => ({navigation, route}) => (
        <HomePage
            navigation={navigation}
            openPremium={() => {}}
            NavigationBar={() => {}}
            restartApp={restartApp}
        />
    ), [restartApp])

    return (
        <LanguageContext.Provider value={{lang, setLang}} >
            <ThemeContext.Provider value={{
                auto: color_choice === "auto",
                ...(color_choice === "light" || (color_choice === "auto" && default_scheme === "light")) ? LightColors : DarkColors
            }} >
                <NavigationContainer>     
                    <Tab.Navigator screenOptions={{
                        headerShown: false,
                        tabBarStyle: {display: 'none'},
                    }} >
                        <Tab.Screen name={'Home'} component={Home} />
                    </Tab.Navigator>
                </NavigationContainer>
            </ThemeContext.Provider>
        </LanguageContext.Provider>
    );
}

2. 优化ThemeContext的value（可选） #

每次渲染时创建新的colors对象会导致ThemeContext的消费者触发不必要的重渲染，用useMemo缓存colors对象可以优化性能：

const colors = useMemo(() => ({
    auto: color_choice === "auto",
    ...(color_choice === "light" || (color_choice === "auto" && default_scheme === "light")) ? LightColors : DarkColors
}), [color_choice, default_scheme])

效果验证 #

修改后，切换主题时Home组件的空依赖useEffect只会执行一次，页面状态（如输入框内容）不会丢失。

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