如何避免react-native-calendars中不必要的重渲染？

问题核心是每次新增照片时，latestImagesByDateString会生成全新的对象引用，导致getDayComponent的依赖更新，进而触发所有CalendarDayView组件重渲染。以下是针对性的解决方法：

方案1：让日期组件自行从Context获取数据（推荐） #

将图片数据的获取逻辑从父组件的getDayComponent移到CalendarDayView内部，同时用React.memo包裹日期组件，确保只有自身props变化时才重渲染。

步骤1：修改CalendarDayView组件 #

import React, { useContext } from 'react';
import { ImageContext } from './your-context-path';

const CalendarDayView = ({ isToday, dateString, day }) => {
  // 直接从Context中获取最新图片数据
  const latestImagesByDateString = useContext(ImageContext);
  const imageData = latestImagesByDateString[dateString];

  return (
    // 原组件渲染逻辑，使用imageData?.uri和imageData?.id
    <View>
      {imageData && <Image source={{ uri: imageData.uri }} />}
      <Text>{day}</Text>
      {isToday && <View className="today-indicator" />}
    </View>
  );
};

// 用React.memo包裹，仅当props变化时重渲染
export default React.memo(CalendarDayView);

步骤2：简化getDayComponent的依赖 #

移除对latestImagesByDateString的依赖，因为日期组件不再需要通过props接收图片数据：

const getDayComponent = useCallback(
  ({ date, state }) => (
    <CalendarDayView
      isToday={state === 'today'}
      dateString={date.dateString}
      day={date.day}
    />
  ),
  [] // 依赖为空，因为仅传递基础类型props
);

原理：

• getDayComponent不再依赖latestImagesByDateString，因此不会因该对象更新而重新创建所有日期组件。
• 当Context中的latestImagesByDateString更新时，只有对应日期的CalendarDayView会因为读取到新的imageData而重渲染，其他日期组件读取的数据未变化，不会触发重渲染。

方案2：优化图片数据对象的引用稳定性 #

如果不想修改组件数据获取方式，可以优化latestImagesByDateString的生成逻辑，确保未变化日期的图片数据引用不变，配合React.memo实现精准重渲染。

实现代码 #

import { useMemo, useRef } from 'react';

const latestImagesByDateString = useMemo(() => {
  const cache = latestImagesCacheRef.current;
  const newData = {};

  Object.entries(imagesByDateString).forEach(([dateStr, images]) => {
    const latestImage = images[images.length - 1];
    // 如果缓存中已有相同id的图片，复用原有引用
    if (cache[dateStr]?.id === latestImage?.id) {
      newData[dateStr] = cache[dateStr];
    } else {
      newData[dateStr] = latestImage;
      cache[dateStr] = latestImage;
    }
  });

  // 清理已不存在的日期缓存
  Object.keys(cache).forEach(dateStr => {
    if (!imagesByDateString[dateStr]) {
      delete cache[dateStr];
    }
  });

  return newData;
}, [imagesByDateString]);

// 用ref存储缓存，跨渲染周期保留
const latestImagesCacheRef = useRef({});

然后给CalendarDayView添加React.memo，确保props中的图片数据引用不变时不重渲染：

export default React.memo(CalendarDayView, (prevProps, nextProps) => {
  // 自定义比较逻辑：仅当图片id或基础props变化时才重渲染
  return (
    prevProps.isToday === nextProps.isToday &&
    prevProps.dateString === nextProps.dateString &&
    prevProps.day === nextProps.day &&
    prevProps.imageId === nextProps.imageId
  );
});

原理：通过缓存复用未变化日期的图片数据引用，结合React.memo的自定义比较，确保只有图片数据真正变化的日期组件才会重渲染。

内容的提问来源于stack exchange，提问作者resistor