在 React-Native 中渲染数百个视图/触摸（如何执行）

Question

如果您有任何渲染大量视图的经验，我很高兴听到：

我试图在一个页面中呈现大约数百个视图。 更具体地说，我正在渲染对象的 map，其中有自己的 colors。 它将是一个大约 144x256 的网格（我现在不提醒实际比例）

要呈现的视图数量会减慢页面到无法使用的 state

到目前为止，我尝试过：

• 意见
• 可触摸的不透明度
• 复活的组件（用于类似原生的交互）

我要尝试的一些步骤是：

• https://www.npmjs.com/package/dom-to-image （或rn兼容库）
• canvas

Bellow 是一个使用复活组件和视图的示例。 即使是这个简单的网格也不够快，而且它只有 9x16

到目前为止我使用的代码有点复杂（因为我正在为一个大页面构建它）哈哈，我认为它不值得在这里粘贴，但我会：

const DEFAULTS={
  city:{
    GENERALDATA:{
      prefixes:generalDatas.city.prefixes,
    },
    indexes:mapIndexes,
    rows:[...Array(mapIndexes.y).keys()].map(row=>row=[...Array(mapIndexes.x).keys()]),
    array:{...[...Array(mapIndexes.y*mapIndexes.x)].map(blk=>blk={color:'#000'})}
  }, // 256x144   // {coords:[],prev:[],owner,usersData:{'users sent data like [type,houseNumber,50km/h]'}}
}

 const stateDatas = {
    anm:{
      anmText:{

      },
      bitMapIndexes:DEFAULTS.city.indexes,
      bitMap:DEFAULTS.city.array,
      bitMapRows:DEFAULTS.city.rows,
      bitMapKeys:Object.keys(DEFAULTS.city.array),
    }
  }

const renderMap=()=>{
    const renderBlock=(rowI,i,rowLength)=>{
      return(
        <Animated.View style={[{
          width:anmBitMapProps.value.resProportion.x,
          height:anmBitMapProps.value.resProportion.y,
          backgroundColor:'#262626',
          borderColor:'#191919',
          borderWidth:1,
          justifyContent:'center',
          alignItems:'center',
          // borderStyle:'solid'
        },anm.bitMap[(rowI*rowLength)+i]]}>
          <Text style={styles.softText}>1km</Text>
          <Text style={styles.softText}>chunk</Text>
        </Animated.View>
      )
    }

    const renderRow=(row,rowI,rowLength)=>{
      return(
        <View style={{flexDirection:'row'}}>
          {row.map(i=>renderBlock(rowI,i,rowLength))}
        </View>
      )
    }

    const anmBitMapArray = stateDatas.anm.bitMapRows.map((row,rowI)=>renderRow(row,rowI,row.length))

    return(
      <View style={{position:'absolute',width:'100%',height:'100%',backgroundColor:'#121212'}}>
        {anmBitMapArray}
      </View>
    )

我截断了一点，可能缺少一些部分

Answer 1

它需要更多的代码片段和分析才能达到一个简洁的 UI state。 无论如何，我会尝试根据上面的代码片段给出一些指示。

1. 避免使用内联 css。 使用 css 类是目标相关元素。

2. 我们不必再次初始化相同的对象。

3. { width:anmBitMapProps.value.resProportion.x, height:anmBitMapProps.value.resProportion.y, backgroundColor:'#262626', borderColor:'#191919', borderWidth:1, justifyContent:'center', alignItems:'center' , // 边框样式：'solid' }

这个 object 对于所有子元素都是相同的。 所以我们可以在stateDatas旁边初始化它并重用它。

4. 另一个可重用的代码是：

    <Text style={styles.softText}>1km</Text>
    <Text style={styles.softText}>chunk</Text>

这可以在一个单独的组件中取出并包装在React.memo中。 由于这对于所有组件都是相同的，因此无需重新创建它