React Native表格渲染如何避免map遍历导致JSX重复渲染

核心问题原因 #

• 原代码在每个单元格的生成逻辑中调用了products.map，map方法会返回与products数组长度一致的JSX元素数组，导致每个单元格位置都会渲染N个（N为products数组长度）重叠的按钮，仅匹配到条件的按钮为红色、其余为默认色，视觉上效果符合预期，但存在大量冗余渲染。

优化实现 #

步骤1：提前构造行列匹配查找表 #

在generateTable函数外提前遍历products数组，构造行列位置的查找索引，将时间复杂度从O(行数量列数量products长度)降低到O(行数量*列数量 + products长度)，避免每次生成单元格都遍历整个products数组：

// 构造行列匹配查找表，key为`行号-列号`格式的字符串
const productPosMap = new Map()
products.forEach(item => {
  const row = item.placementRow.value
  const col = item.placementColumn.value
  productPosMap.set(`${row}-${col}`, true)
})

步骤2：修改单元格生成逻辑 #

每个单元格仅生成1个JSX元素，通过查找表判断是否匹配条件来切换背景色即可：

const generateTable = () => {
  const table = [];
  const rowValue = fetchedRowData;
  const columnsValue = fetchedColumnData;

  for (let i = 0; i < columnsValue; i++) {
    const children = [];
    for (let j = 0; j < rowValue; j++) {
      //  O(1) 复杂度判断当前行列是否匹配products中的数据
      const isMatch = productPosMap.has(`${j+1}-${i+1}`)
      children.push(
        <TouchableOpacity 
          key={`cell-${i}-${j}`}
          style={{
            width: 50, 
            height: 50, 
            marginBottom:10, 
            marginLeft:5, 
            backgroundColor: isMatch ? 'red' : vmColor,
            alignItems: "center", 
            justifyContent: 'center'
          }} 
          onPress={() => navigation.navigate('Internet', { paramKey: telephone })}
        >
          <Text style={styles.buttonText}>row: {j+1}</Text>
          <Text style={styles.buttonText}>column: {i+1}</Text>
        </TouchableOpacity>
      )
    }
    table.push(
      <View key={`row-${i}`}>
        {children}
      </View>
    );
  }
  return table;
};

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