React Native+TanStack Query优化搜索状态，避免列表项重绘闪烁

针对你遇到的搜索状态变更时列表项重绘闪烁问题，结合你的现有代码，给出以下具体优化步骤：

1. 给BookList组件添加React.memo，避免不必要的重渲染 #

当HomeScreen的搜索状态变化时，BookList的search、searchData等props会更新，如果不包裹memo，组件会无条件重渲染，间接触发FlatList的重新计算。

修改BookList组件：

import { memo } from 'react';

interface BookListProps {
    simpleData: Book[];
    searchData?: Book[];
    search: string;
}

export default memo(function BookList({
    simpleData,
    searchData,
    search,
}: BookListProps) {
    // 原有代码保持不变
}, (prevProps, nextProps) => {
    // 自定义比较器：仅当搜索状态或数据引用变化时才重渲染
    if (prevProps.search !== nextProps.search) return false;
    if (prevProps.simpleData !== nextProps.simpleData) return false;
    if (prevProps.searchData !== nextProps.searchData) return false;
    return true;
});

2. 用useCallback稳定FlatList的renderItem函数 #

内联的renderItem箭头函数会在每次BookList重渲染时生成新引用，FlatList会因此认为需要重新渲染所有子项。用useCallback包裹来稳定引用：

export default memo(function BookList({
    simpleData,
    searchData,
    search,
}: BookListProps) {
    const hasSearch = !!search && search !== "";

    const shownData = React.useMemo(
        () => (hasSearch ? searchData : simpleData),
        [hasSearch, searchData, simpleData]
    );

    // 用useCallback稳定renderItem引用
    const renderBookItem = React.useCallback(({ item }: { item: Book }) => (
        <BookCard book={item} />
    ), []); // 依赖为空，BookCard的memo会自行处理props变化

    return (
        <View style={styles.container}>
            <FlatList
                contentContainerStyle={styles.contentContainer}
                data={shownData}
                renderItem={renderBookItem}
                keyExtractor={(book) => book.id.toString()}
                scrollEnabled={false}
            />
        </View>
    );
}, /* 比较器同上 */);

注意：移除了BookCard上手动添加的key，因为FlatList的keyExtractor已经指定了唯一key，无需重复设置。

3. 优化BookCard内部子组件的渲染逻辑 #

检查BookCard内部的子组件（如BookLikeButton、LocationTag）是否也用React.memo包裹，避免子组件不必要的重绘：

// 示例：给BookLikeButton添加memo
const BookLikeButton = memo(({ book }: { book: Book }) => {
    // 原有组件逻辑
}, (prevProps, nextProps) => {
    // 仅当图书id或点赞状态变化时才重绘
    return prevProps.book.id === nextProps.book.id && prevProps.book.isLiked === nextProps.book.isLiked;
});

4. 缓存图书对象引用，避免相同id的对象引用变化 #

搜索切换时，searchData返回的图书对象可能和simpleData中的同id对象是不同引用，即使BookCard的memo比较器判断id相同，也可能因对象引用变化触发内部逻辑重绘。可以在BookList中添加缓存：

export default memo(function BookList({
    simpleData,
    searchData,
    search,
}: BookListProps) {
    const hasSearch = !!search && search !== "";

    // 缓存所有图书的引用，确保同id对象引用稳定
    const bookCache = React.useMemo(() => {
        const cache = new Map<number, Book>();
        simpleData.forEach(book => cache.set(book.id, book));
        searchData?.forEach(book => cache.set(book.id, book));
        return cache;
    }, [simpleData, searchData]);

    const shownData = React.useMemo(() => {
        const sourceData = hasSearch ? searchData : simpleData;
        // 从缓存中获取稳定引用
        return sourceData?.map(book => bookCache.get(book.id) || book) || [];
    }, [hasSearch, searchData, simpleData, bookCache]);

    // 后续renderItem等代码保持不变
}, /* 比较器同上 */);

5. 开启FlatList的性能优化属性 #

给FlatList添加以下属性，提升组件复用效率：

<FlatList
    contentContainerStyle={styles.contentContainer}
    data={shownData}
    renderItem={renderBookItem}
    keyExtractor={(book) => book.id.toString()}
    scrollEnabled={false}
    removeClippedSubviews={true} // 自动移除不可见子视图
    maxToRenderPerBatch={10} // 控制每次批量渲染数量
    windowSize={5} // 控制可见区域外预渲染数量
/>

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