如何解决useMemo 不会影响组件渲染
我正在听 useSelector
的 redux 存储更改,问题是在每次数组更改时,整个平面列表都会完全重新呈现。例如,如果我删除一个项目,整个平面列表将再次完全呈现。我想防止这种情况发生。
<FlatList renderItem={renderItem} keyExtractor={keyExtractor} data={notifications}></FlatList>
这是渲染项函数:
const renderItem = ({ item,index }) => <Notification key={item._id} notification={item} userId={loggedUser._id} />;
这是用 Notification
包裹的 useMemo
组件:
const Notification = memo<NotificationProps>(({ notification,userId }: NotificationProps) => {
const { title,sender,date,isRead,data,body,_id } = notification;
const [postTime,setPostTime] = useState<string>(calcTimeAgo(date));
const navigation = useNavigation();
const dispatch = usedispatch();
// const {} = useSelector(postsSelector)
console.log("render notification",notification._id);
useEffect(() => {
const interval = setInterval(() => {
setPostTime(calcTimeAgo(date));
},1000 * 60);
return () => clearInterval(interval);
},[]);
const openNotification = (notification: INotification) => {
navigation.navigate("Videodisplay",{ posts: [notification.data] });
dispatch(markNotificationAsRead(notification,userId));
};
const handleDeleteNotification = (notification: INotification) => {
dispatch(deleteNotification(notification,userId));
};
const leftActions = (progress,dragX) => {
const scale = dragX.interpolate({
inputRange: [0,100],outputRange: [0,1],extrapolate: "clamp",});
return (
<View style={styles.leftAction}>
<Animated.Text style={[styles.actionText,{ transform: [{ scale }] }]}>
<Feather name="trash-2" color={Colors.white} size={25} />
</Animated.Text>
</View>
);
};
return (
<Swipeable renderLeftActions={leftActions} onSwipeableOpen={() => handleDeleteNotification(notification)}>
<TouchableHighlight
underlayColor={Colors.darkBlueOpaque}
onPress={() => openNotification(notification)}
style={{
backgroundColor: Colors.black,flexDirection: "row",alignItems: "center",padding: 10,justifyContent: "center",}}
>
<>
<Avatar source={sender.image ? { uri: sender.image } : images.avatar} rounded size={50}></Avatar>
<View style={{ marginHorizontal: 15 }}>
<Text style={!isRead && { fontWeight: "bold" }}>
<Text style={styles.username}>{sender.fullName} </Text>
<Text style={styles.content}>Challenged you to try his challenge </Text>
</Text>
<Text style={[styles.content,!isRead && { fontWeight: "bold" }]}>{body}</Text>
<Text style={styles.postTime}>{postTime}</Text>
</View>
{isRead ? null : <View style={styles.notRead}></View>}
</>
</TouchableHighlight>
</Swipeable>
);
},arePropsEqual);
问题是:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。