useMemo 不会影响组件渲染

问题描述

我正在听 useSelector 的 redux 存储更改，问题是在每次数组更改时，整个平面列表都会完全重新呈现。例如，如果我删除一个项目，整个平面列表将再次完全呈现。我想防止这种情况发生。

我有一个呈现通知列表的 flatList：

<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);

问题是：

1. 未触发相等函数（我没有看到 console.log）
2. 每次我从列表中删除一个项目时，所有通知组件都会再次呈现。想用 useMemo 防止这种情况发生，但没有效果。我在这里错过了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）