React Native子组件导航触发父组件重渲染问题求助

首先明确：这不是React Navigation的正常机制，核心问题是组件重渲染未做优化，导航操作只是触发了未优化组件的重渲染问题暴露出来。

问题根源 #

1. Parent组件无意义重渲染：调用navigation.navigate时，导航容器内部状态更新。如果你的Parent是导航栈中的屏幕组件（或屏幕的直接子组件），且未用React.memo包裹，即使自身state/props没有变化，也会跟着导航容器重渲染。
2. FlatList的renderItem引用不稳定：你给FlatList的renderItem传了匿名函数({item}) => <Child item={item} />，每次Parent重渲染时，这个匿名函数都会生成新引用，FlatList会判定子项渲染逻辑变化，进而触发所有可见子组件重渲染。
3. Child组件未做memo优化：Child是普通函数组件，未用React.memo包裹，即使传入的item props无变化，只要父渲染项重渲染，Child就会跟着重渲染。另外，onPress里的箭头函数每次渲染都会生成新引用，也会导致后续memo优化失效。

解决步骤 #

1. 优化Parent组件 #

用React.memo包裹Parent，同时用useCallback稳定renderItem的引用：

import React, { memo, useState, useCallback } from 'react';
import { FlatList } from 'react-native';

export const Parent = memo(() => {
  const [alotofItems, setAlotOfItems] = useState<AlotOfItems[]>([]);
  console.log("Parent rerender");

  // 用useCallback固定renderItem引用，避免Parent重渲染时触发FlatList全量更新
  const renderItem = useCallback(({ item }) => <Child item={item} />, []);

  return <FlatList renderItem={renderItem} data={alotofItems} />;
});

2. 优化Child组件 #

用React.memo包裹Child，同时用useCallback稳定onPress函数的引用：

import React, { memo, useCallback } from 'react';
import { useNavigation } from '@react-navigation/native';

export const Child = memo(({ item }) => {
  const navigation = useNavigation();
  console.log("I rerender");

  // 用useCallback固定onPress引用，避免每次渲染生成新函数导致memo失效
  const handlePress = useCallback(() => {
    navigation.navigate(DETAIL_CARD);
  }, [navigation, DETAIL_CARD]);

  return <ListCard onPress={handlePress} />;
});

3. 额外优化：确保列表项引用稳定 #

如果alotofItems是接口请求或动态生成的数据，用useMemo缓存列表，避免每次更新时生成新的对象引用，防止因为item变化触发Child无意义重渲染：

const stableItems = useMemo(() => alotofItems, [alotofItems]);
// 给FlatList传入stableItems作为data
return <FlatList renderItem={renderItem} data={stableItems} />;

为什么本地state控制详情页时正常？ #

用本地state时，只有点击的Child组件内部state变化，只会触发该组件自身重渲染，不会影响Parent和其他Child组件，因此不会出现全局重渲染的情况。

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