在 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中。 由於這對於所有組件都是相同的，因此無需重新創建它