我想知道當您單擊goback或時反應是否會從記憶體中洗掉組件navigation.pop()
我正在使用navigation.Push而不是navigation.navigate在這種情況下。
記憶體和性能會不會有問題？
我必須做一些特別的事情來清除那些嗎？
uj5u.com熱心網友回復：
在react-native-navigation 生命周期中，如果您離開您在Stack.
考慮具有螢屏 A 和 B 的本機堆疊導航器。導航到 A 后，呼叫其 componentDidMount。在壓入 B 時，它的 componentDidMount 也會被呼叫，但 A 仍然掛載在堆疊上，因此不會呼叫它的 componentWillUnmount。
另一方面。
從 B 回到 A 時，呼叫了 B 的 componentWillUnmount，但 A 的 componentDidMount 沒有被呼叫，因為 A 一直處于掛載狀態。
我們可以通過創建一個簡單StackNavigator的兩個螢屏來測驗這一點，如檔案中所示。創建一個useEffect空依賴陣列并記錄如下內容。
import React, {useState, useEffect} from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation, route }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to ScreenA"
onPress={() => navigation.navigate('ScreenA')}
/>
</View>
);
}
function ScreenA({ navigation, route }) {
useEffect(() => {
console.log("Screen A")
}, [])
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to ScreenB"
onPress={() => navigation.navigate('ScreenB')}
/>
</View>
);
}
function ScreenB({ navigation, route }) {
useEffect(() => {
console.log("Screen B")
},[])
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to ScreenA"
onPress={() => navigation.navigate('ScreenA')}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="ScreenA" component={ScreenA} />
<Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
考慮以下導航路線：
ScreenA->ScreenB->ScreenA->ScreenB
我們會注意到以下日志訊息：
ScreenA,ScreenB,ScreenB
This is because ScreenA remains mounted while ScreenB is unmounted and mounted again.
Now, what happens if we push a screen? We can test this as well by using the same example but pushing ScreenB in ScreenB itself as follows.
function ScreenB({ navigation, route }) {
useEffect(() => {
console.log("Screen B")
},[])
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Push to ScreenB"
onPress={() => navigation.push('ScreenB')}
/>
</View>
);
}
We will notice that on each push a new ScreenB is mounted!
What happens if we use navigation.pop? The screen that is being poped will be unmounted and the same will happen if we use goBack for the same reasons as provided above.
Performance-wise, using navigation.pop() or navigation.goBack() will release the memory of the screen in which we are calling these functions as they are unmounted.
On the other hand, constantly pushing the same screen on the Stack is not a good idea.
I would also consider on what code is located in useEffect. If it is an API call, then we often want it to be only called once. From that perspective it is desired that a screen remains mounted once we have entered it.
To summarize, goBack and pop will unmount the screen on which we are calling these functions. React native will release the memory occupied by the screen (in form of states, variables, etc.). You do not have to do anything special.
I have made a little snack using mainly the above code.
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/443810.html