React Native组件无端重复渲染问题排查求助

兄弟，我一眼就看出你代码里导致Categories和Queries反复渲染的几个关键问题，咱们一步步来修复：

1. useMemo 缺失依赖数组，导致每次渲染都重新生成对象 #

你用了useMemo来创建categories和queries，但没有传入第二个依赖参数。这意味着每次父组件触发渲染时，useMemo都会重新执行回调函数，生成全新的对象实例。当你用Object.values()遍历这些新对象时，React会认为数组里的每个元素都是新的，进而触发子组件的重新渲染。

修复方法很简单，给两个useMemo加上空的依赖数组（因为你的对象内容都是静态的，没有依赖外部变量）：

const categories = useMemo(() => ({
  chefs: {
    name: 'Chefs',
    title: getMessageByKey('explore.chefs'),
    image: ChefsCategory,
    available: true,
  },
  recipes: {
    name: 'Recipes',
    title: getMessageByKey('explore.recipes'),
    image: RecipesCategory,
    available: true,
  },
  products: {
    name: 'Products',
    title: getMessageByKey('explore.products'),
    image: ProductsCategory,
    available: false,
  },
  buisness: {
    name: 'Buisness',
    title: getMessageByKey('explore.buisness'),
    image: BuisnessCategory,
    available: false,
  },
}), []) // 空数组确保只在组件挂载时计算一次

const queries = useMemo(() => ({
  trending: {
    name: 'Trending',
    title: getMessageByKey('explore.trending'),
    image: <FireFilter style={styles.queryImage} />,
    selectedImage: <FireWhiteFilter style={styles.queryImage} />,
    dataFunc_Chefs: getTrending_Chefs,
    dataFunc_Recipes: getTrending_Recipes,
  },
  new: {
    name: 'New',
    title: getMessageByKey('explore.new'),
    image: <LightningFilter style={styles.queryImage} />,
    selectedImage: <LightningWhiteFilter style={styles.queryImage} />,
    dataFunc_Chefs: getNew_Chefs,
    dataFunc_Recipes: getNew_Recipes,
  },
  top: {
    name: 'Popular',
    title: getMessageByKey('explore.popular'),
    image: <HeartFilter style={styles.queryImage} />,
    selectedImage: <HeartWhiteFilter style={styles.queryImage} />,
    dataFunc_Chefs: getPopular_Chefs,
    dataFunc_Recipes: getPopular_Recipes,
  },
  verified: {
    name: 'Verified',
    title: getMessageByKey('explore.verified'),
    image: <VerifiedFilter style={styles.queryImage} />,
    selectedImage: <VerifiedWhiteFilter style={styles.queryImage} />,
    dataFunc_Chefs: getVerified_Chefs,
    dataFunc_Recipes: getVerified_Recipes,
  },
}), []) // 同样加空依赖数组

2. 内联箭头函数导致TouchableWithoutFeedback频繁重渲染 #

你在onPress里直接写了内联箭头函数（比如()=> handleCategoryClick(category.name)），每次父组件渲染时都会创建新的函数实例。React会把这个新函数当成不同的props，从而触发TouchableWithoutFeedback及其子元素的重新渲染。

解决办法是用useCallback把点击处理函数包裹起来，保证函数引用的稳定性：

// 先把点击处理函数用useCallback包裹
const handleCategoryClick = useCallback((categoryName) => {
  // 你的点击逻辑
}, []) // 如果函数里用到其他外部变量，要加到依赖数组里

const showComingSoonToast = useCallback(() => {
  showToast({type: 'error', text1: 'Coming Soon', text2: 'This feature is Coming Soon'})
}, [])

const handleQueryClick = useCallback((query) => {
  // 你的查询点击逻辑
}, []) // 同样添加必要的依赖

然后把onPress改成引用这些稳定的函数：

// Categories部分的onPress
<TouchableWithoutFeedback 
  onPress={category.available ? () => handleCategoryClick(category.name) : showComingSoonToast}
>
  <Image style={[styles.categoryImage, selectedCategory === category.name ? styles.selectedCategory : '']} source={ category.image } />
</TouchableWithoutFeedback>

// Queries部分的onPress
<TouchableWithoutFeedback 
  key={query.name} 
  onPress={() => handleQueryClick(query)}
>
  <View style={[styles.queryContainer, selectedQuery === query.name ? styles.querySelected : '']}>
    <Text style={selectedQuery === query.name ? styles.queryTextSelected : styles.queryText}>{query.title}</Text>
    { selectedQuery === query.name ? query.selectedImage : query.image }
  </View>
</TouchableWithoutFeedback>

3. 额外优化：给子元素添加React.memo（如果是自定义组件的话） #

如果后续你把分类/查询项封装成自定义组件，还可以用React.memo包裹它们，让组件只在props真正变化时才重新渲染。不过你现在用的都是RN原生组件，这一步可以暂时忽略。

做完这几步，你应该就不会再看到日志里反复输出“Rendering Categories”和“Rendering Queries”了，组件的性能也会明显提升。

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