React Native-UseEffect和其他函数需要时间才能加载

Question

我正在使用React Native创建一个应用程序。我的useEffect和其他功能调用大约需要一分钟，这导致了延迟并降低了用户体验。

useEffect(() => {
const token = JWTToken('');
getAllChannels(token);
}, [navigation]);

//添加通道的代码

const clickSave = () => {
const token = JWTToken('');
addchannel(token);
};

//呈现代码

return (
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<SafeAreaView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.f2Color
: Colors.dark.backgrounColor,
}}>
<TouchableOpacity onPress={goBack}>
<View
style={{
flexDirection: 'row',
marginHorizontal: width * 0.02,
marginVertical: height * 0.02,
alignItems: 'center',
}}>
<SvgLeftArrow
color={!darkTheme ? Colors.light.textColor : Colors.light.white}
/>
<Text
style={{
fontFamily: 'OpenSans-Bold',
fontSize: 20,
color: !darkTheme ? Colors.light.textColor : Colors.light.white,
marginLeft: width * 0.03,
fontWeight: 'bold',
}}>
Manage Channels
</Text>
</View>
</TouchableOpacity>
<View
style={{
width: width * 0.95,
height: Platform.OS === 'android' ? height * 0.06 : height * 0.05,
marginVertical: height * 0.01,
backgroundColor: !darkTheme
? Colors.light.white
: Colors.dark.changePwdText,
marginHorizontal: Platform.OS === 'android' && height * 0.01,
borderRadius: 13,
alignSelf: 'center',
flexDirection: 'row',
alignItems: 'center',
}}>
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.04,
color: !darkTheme
? Colors.light.textColor
: Colors.dark.textColor,
width: width * 0.86,
}}
value={searchChannel}
onChangeText={value => {
setSearchChannel(value);
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Add a channel..."
placeholderTextColor={
!darkTheme ? Colors.light.placeholderColor : Colors.dark.textColor
}
/>
{!createLoader ? (
<TouchableOpacity onPress={clickSave}>
<Image
source={require('../assets/images/black-round-tick.png')}
resizeMode="contain"
/>
</TouchableOpacity>
) : (
<ActivityIndicator color={Colors.light.black} />
)}
</View>
{!loader ? (
<FlatList
data={channelList}
scrollEnabled={true}
renderItem={({item, index}) =>
channelList.length > 0 ? (
<ChannelComponent
item={item}
setCallGetChannel={setCallGetChannel}
/>
) : (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
}}>
<Text>No Channels Found!</Text>
</View>
)
}
numColumns={1}
keyExtractor={(item, index) => index}
contentContainerStyle={{
alignSelf: 'center',
flex: 1,
}}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
onEndReachedThreshold={0}
bounces={false}
style={{marginBottom: height * 0.05}}
/>
) : (
<View
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator color={Colors.light.black} />
</View>
)}
</SafeAreaView>
</KeyboardAvoidingView>
);

我如上所述创建了，但每个函数都需要时间调用。甚至Loader也会在一分钟后出现。这发生在我的完整代码中。甚至TouchableOpacity也需要多次尝试才能执行。

如果你对我的问题有答案，请提出建议。

Answer 1

这里可能有无限循环：

useEffect(() => {
const token = JWTToken('');
getAllChannels(token);
}, [navigation]);

你需要更精确地控制你的效果。例如，你可以在你的效果中添加条件，比如：

useEffect(() => {
if (!isLoading) {
const token = JWTToken('');
getAllChannels(token);
}
}, [isLoading]);

另一种方法是检查这个插件有多少转发器https://github.com/welldone-software/why-did-you-render或使用Flipper