Question

我正在听 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);

问题是：

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

useMemo 不会影响组件渲染

0 个答案: