React Native FlatList行重复渲染：已用shouldComponentUpdate仍无效？

先梳理下你的代码场景：

HomeScreen.js 核心代码 #

render() { 
  return ( 
    <View style={styles.container} onLayout={this.onLayout.bind(this)}> 
      <Spinner visible={this.state.isShowSpinner} animation="fade" color={APP_THEME_COLOR} /> 
      <View style={styles.subContainerStyle}> 
        {facetWebView} 
        <AnimatedFlatList 
          style={styles.flatListStyle} 
          ref={flatListRef => this.templateFlatList = flatListRef} 
          data={this.state.templatePosts} 
          renderItem={({item}) => this.renderCellItem(item)} 
        /> 
      </View> 
    </View> 
  )
} 

renderCellItem(item, index) { 
  return ( 
    <TemplateCell 
      item={item} 
      index={index} 
      isPortraitMode={this.state.isPortraitMode} 
      didSelectItemFromCell={(item) => { this.didSelectItemFromCell(item) }} 
    /> 
  ) 
}

TemplateCell 核心代码 #

shouldComponentUpdate(nextProps, nextState) { 
  const isItemChanged = this.props.item != nextProps.item 
  const isPortraitMode = this.props.isPortraitMode != nextProps.isPortraitMode 
  return isItemChanged || isPortraitMode 
}

你判断的问题根源完全正确——直接修改（mutate）数组中的item对象，导致item引用未发生变化，这才让shouldComponentUpdate的对比失效，进而引发不必要的重复渲染。下面是具体的解决办法：

一、核心修复：改用不可变数据更新方式 #

永远不要直接修改state里的数组或对象，必须通过创建新的数组/对象来更新状态。比如当你需要切换某条item的收藏状态时：

// ❌ 错误：直接修改原对象（引用不变，子组件检测不到变化）
const posts = this.state.templatePosts;
const targetItem = posts.find(item => item.id === targetId);
targetItem.isFavorite = !targetItem.isFavorite;
this.setState({ templatePosts: posts });

// ✅ 正确：创建新对象和新数组，保证修改项的引用更新
this.setState(prevState => ({
  templatePosts: prevState.templatePosts.map(item => {
    if (item.id === targetId) {
      // 展开原对象，仅修改需要更新的字段，返回新对象
      return { ...item, isFavorite: !item.isFavorite };
    }
    // 未修改的项直接返回原引用，不浪费性能
    return item;
  })
}));

这样修改后，被更新的item会是全新的引用，TemplateCell的shouldComponentUpdate就能正确检测到isItemChanged为true，触发必要的更新；未修改的item引用不变，不会触发无效渲染。

二、优化props传递：避免重复创建回调函数 #

你在renderCellItem里每次都创建新的箭头函数didSelectItemFromCell，这会导致父组件重绘时，子组件的这个props始终是新引用，即使item没变化，也可能触发不必要的渲染。可以提前绑定函数：

// 在父组件的constructor中绑定函数
constructor(props) {
  super(props);
  this.didSelectItemFromCell = this.didSelectItemFromCell.bind(this);
}

// 渲染子组件时直接传递绑定好的函数
renderCellItem(item, index) { 
  return ( 
    <TemplateCell 
      item={item} 
      index={index} 
      isPortraitMode={this.state.isPortraitMode} 
      didSelectItemFromCell={this.didSelectItemFromCell} 
    /> 
  ) 
}

三、可选简化：改用PureComponent #

如果你的TemplateCell是类组件，可以直接继承React.PureComponent，它会自动帮你做props的浅对比，省去手动编写shouldComponentUpdate的麻烦——前提是你已经做到了不可变数据更新：

import React, { PureComponent } from 'react';

class TemplateCell extends PureComponent {
  // 无需再写shouldComponentUpdate，PureComponent会自动处理浅对比
  render() {
    // ...你的渲染逻辑
  }
}

四、必加配置：给FlatList设置keyExtractor #

FlatList必须通过唯一key来识别列表项身份，否则React无法准确判断哪些项需要更新，会引发大量无效渲染。确保添加：

<AnimatedFlatList 
  style={styles.flatListStyle} 
  ref={flatListRef => this.templateFlatList = flatListRef} 
  data={this.state.templatePosts} 
  renderItem={({item}) => this.renderCellItem(item)}
  keyExtractor={(item) => item.id.toString()} // 用item的唯一id作为key
/>

总结 #

核心原则就是坚持不可变数据更新，配合优化回调传递、使用PureComponent和正确的key配置，就能彻底解决列表行重复渲染的问题。

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